/* =========================================================
 * Extracted from reels.php
 * Generated by _refactor_css.php — do not edit directly
 * =========================================================
 */


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #000;
            overflow: hidden;
            overflow-x: hidden;
            position: fixed;
            width: 100%;
            max-width: 100vw;
            height: 100%;
        }
        :root {
            --reel-caption-bg-opacity: 0;
            --reel-caption-title-color: #ffffff;
            --reel-caption-desc-color: #e6e6e6;
        }

        /* Reels Container */
        #reelsContainer {
            position: fixed;
            width: 100%;
            max-width: 100vw;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            -webkit-scroll-snap-type: y mandatory; /* iOS compatibility */
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            scrollbar-width: none;
        }

        #reelsContainer::-webkit-scrollbar {
            display: none;
        }

        /* Individual Reel */
        .reel {
            position: relative;
            width: 100%;
            max-width: 100vw;
            min-height: 100vh;
            min-height: 100dvh; /* Dynamic viewport height for mobile */
            scroll-snap-align: start;
            -webkit-scroll-snap-align: start; /* iOS compatibility */
            scroll-snap-stop: always;
            -webkit-scroll-snap-stop: always; /* iOS compatibility */
            background: #000;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Portrait Video Container */
        .reel.portrait {
            height: 100vh;
            height: 100dvh;
        }

        /* Landscape Video Container */
        .reel.landscape {
            height: auto;
            min-height: 100vh;
            min-height: 100dvh;
        }

        /* Video Player */
        .reel video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
        }

        /* Portrait Video */
        .reel.portrait video {
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
        }

        /* Landscape Video */
        .reel.landscape video {
            position: relative;
            object-fit: contain;
            width: 100%;
            height: auto;
        }

        /* Back Button */
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
            background: rgba(0,0,0,0.5);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Gear Settings Button (top-right) */
        .gear-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
            background: rgba(0,0,0,0.5);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Mute button — lives inside .reel-actions column */
        .mute-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
            text-shadow: 0 0 4px rgba(0,0,0,0.8);
        }

        /* Reel Settings Dialog */
        .reel-settings-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 5000;
            align-items: flex-end;
            justify-content: center;
        }
        .reel-settings-overlay.open {
            display: flex;
        }
        .reel-settings-dialog {
            background: #1e1e1e;
            border-radius: 20px 20px 0 0;
            width: 100%;
            max-width: 480px;
            padding: 20px 24px 36px;
            color: #fff;
        }
        .reel-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .reel-settings-header h3 {
            font-size: 17px;
            font-weight: 700;
            margin: 0;
        }
        .reel-settings-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            line-height: 1;
            padding: 0;
        }
        .reel-setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 0;
            border-bottom: 1px solid #2e2e2e;
        }
        .reel-setting-row:last-child {
            border-bottom: none;
        }
        .reel-setting-label {
            font-size: 15px;
            line-height: 1.4;
        }
        .reel-setting-desc {
            font-size: 12px;
            color: #888;
            margin-top: 3px;
        }
        /* Ajax toggle slider */
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 28px;
            flex-shrink: 0;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }
        .toggle-track {
            position: absolute;
            inset: 0;
            background: #444;
            border-radius: 28px;
            cursor: pointer;
            transition: background 0.25s;
        }
        .toggle-track::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.25s;
        }
        .toggle-switch input:checked + .toggle-track {
            background: #ff0000;
        }
        .toggle-switch input:checked + .toggle-track::after {
            transform: translateX(22px);
        }
        .toggle-saving .toggle-track {
            opacity: 0.6;
            pointer-events: none;
        }

        .reel-setting-row.setting-locked {
            opacity: 0.65;
        }

        .reel-setting-row.setting-locked .toggle-track {
            cursor: not-allowed;
        }

        /* Video Progress Bar */
        .video-progress {
            position: absolute;
            bottom: 6px;
            left: 0;
            right: 0;
            height: 30px; /* Larger touch area */
            z-index: 50;
            cursor: pointer;
            padding: 12px 0; /* Extra touch padding */
        }

        .video-progress-track {
            position: absolute;
            bottom: 12px;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }
        .video-progress-fill {
            position: absolute;
            bottom: 12px;
            left: 0;
            height: 4px;
            background: #fff;
            width: 0%;
            transition: width 0.1s linear;
            pointer-events: none;
            border-radius: 2px;
        }

        .video-progress-thumb {
            position: absolute;
            bottom: 6px;
            transform: translateX(-50%);
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
            box-shadow: 0 0 6px rgba(0,0,0,0.6);
            left: 0%;
        }

        .video-progress:active .video-progress-thumb,
        .video-progress.seeking .video-progress-thumb,
        .reel.seeking .video-progress-thumb {
            opacity: 1;
        }

        /* Time Display */
        .video-time {
            position: absolute;
            bottom: 46px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            text-shadow: 0 0 4px rgba(0,0,0,0.8);
            background: rgba(0,0,0,0.6);
            padding: 4px 12px;
            border-radius: 12px;
            z-index: 50;
            opacity: 0;
            transition: opacity 0.2s;
            white-space: nowrap;
        }

        .reel.seeking .video-time {
            opacity: 1;
        }

        /* Caption Overlay */
        .reel-caption {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 70px;
            padding: 20px 34px 20px 15px;
            background: rgba(0, 0, 0, var(--reel-caption-bg-opacity));
            color: #fff;
            z-index: 10;
            -webkit-mask-image:
                linear-gradient(to right, black 0%, black 96%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, black 14%, black 92%, transparent 100%);
            -webkit-mask-composite: source-in;
            mask-image:
                linear-gradient(to right, black 0%, black 96%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, black 14%, black 92%, transparent 100%);
            mask-composite: intersect;
        }

        /* Landscape Video Caption */
        .reel.landscape .reel-caption {
            bottom: 20px;
        }

        .reel-username {
            font-weight: 600;
            font-size: 15px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .reel-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            line-height: 1.4;
            color: var(--reel-caption-title-color);
            display: block;
        }

        .reel-premium-unlocked-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            background: none;
            color: #3dff86;
            cursor: pointer;
            padding: 0;
            margin-left: 6px;
            line-height: 1;
            vertical-align: baseline;
            -webkit-appearance: none;
            appearance: none;
        }

        .reel-premium-unlocked-btn i {
            font-size: 12px;
            line-height: 1;
        }

        .reel-premium-unlocked-tip {
            position: absolute;
            left: calc(100% + 8px);
            right: auto;
            top: 50%;
            bottom: auto;
            background: rgba(0, 0, 0, 0.88);
            border: 1px solid rgba(43, 216, 105, 0.55);
            color: #d7ffe7;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            padding: 6px 8px;
            border-radius: 7px;
            white-space: nowrap;
            opacity: 0;
            transform: translate(4px, -50%);
            pointer-events: none;
            transition: opacity 0.16s ease, transform 0.16s ease;
            z-index: 20;
        }

        .reel-premium-unlocked-tip.visible {
            opacity: 1;
            transform: translate(0, -50%);
        }

        .reel-description {
            font-size: 13px;
            line-height: 1.4;
            color: var(--reel-caption-desc-color);
            max-height: 60px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.5s ease, opacity 0.4s ease;
            opacity: 1;
            margin-top: 0;
        }

        .reel-description.expanded {
            max-height: 38vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .reel-description.expanded::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .see-more-btn {
            background: none;
            border: none;
            color: #fff;
            font-weight: 600;
            font-size: 13px;
            padding: 0;
            margin-top: 4px;
            cursor: pointer;
        }

        /* Side Actions */
        .reel-actions {
            position: absolute;
            right: 12px;
            bottom: 60px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            z-index: 10;
        }

        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 24px;
            text-shadow: 0 0 4px rgba(0,0,0,0.8);
        }

        .action-btn.active {
            color: #ff0000;
        }

        .like-btn.active {
            color: #00c853;
        }

        .action-count {
            font-size: 12px;
            font-weight: 600;
            margin-top: 4px;
        }

        /* Comments drawer backdrop */
        #commentsBackdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 999;
        }
        #commentsBackdrop.open { display: block; }

        /* Comments Drawer */
        .comments-drawer {
            position: fixed;
            bottom: -100%;
            left: 0;
            right: 0;
            max-height: 70vh;
            height: auto;
            background: #1a1a1a;
            border-radius: 20px 20px 0 0;
            z-index: 1000;
            transition: bottom 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }

        .comments-drawer.open {
            bottom: 0;
        }

        .drawer-handle {
            width: 40px;
            height: 4px;
            background: #666;
            border-radius: 2px;
            margin: 12px auto 8px;
        }

        .drawer-header {
            padding: 12px 20px;
            border-bottom: 1px solid #333;
            font-weight: 600;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-drawer-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
        }

        .comments-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 16px 10px;
        }

        .comment-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin-bottom: 20px;
            color: #fff;
        }

        .comment-body {
            flex: 1;
            min-width: 0;
        }

        .comment-replies {
            margin-left: 42px;
            margin-top: 12px;
            border-left: 2px solid #333;
            padding-left: 12px;
        }

        .comment-time {
            font-size: 11px;
            color: #888;
        }

        /* Comment filter dropdown */
        .reels-filter-wrapper { position: relative; }
        .filter-btn { background:none; border:none; color:#fff; padding:6px 10px; cursor:pointer; transition:color 0.2s; }
        .filter-btn:hover { color:#ccc; }
        .filter-btn i { font-size:16px; }
        .filter-dropdown { position:absolute; top:100%; right:0; margin-top:4px; background:#1a1a1a; border:1px solid #444; border-radius:8px; min-width:160px; z-index:1000; overflow:hidden; }
        .filter-option { display:block; width:100%; text-align:left; background:none; border:none; color:#e0e0e0; padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid #333; transition:background 0.15s; }
        .filter-option:last-child { border-bottom:none; }
        .filter-option:hover { background:rgba(255,255,255,0.1); }
        .filter-option.active { background:rgba(255,0,0,0.2); color:#ff0000; font-weight:600; }
        .filter-option i { margin-right:8px; width:16px; }

        .comment-action.liked {
            color: #2c9a2c;
        }

        .comment-action.disliked {
            color: #ef5350;
        }

        .comment-action.delete-action {
            color: #e74c3c;
        }

        .comment-action.edit-action {
            color: #bfbfbf;
        }

        .toggle-reel-replies {
            color: #ff0000;
        }

        .reply-indicator {
            display: none;
            padding: 6px 20px;
            background: #2a2a2a;
            color: #bfbfbf;
            font-size: 13px;
            border-top: 1px solid #333;
            align-items: center;
            justify-content: space-between;
        }

        .reply-indicator.active {
            display: flex;
        }

        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .comment-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .comment-header {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 3px;
        }

        .comment-username {
            font-weight: 600;
            font-size: 14px;
            line-height: 1;
        }

        .comment-text-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .comment-text {
            flex: 1;
            font-size: 14px;
            line-height: 1.5;
            color: #e6e6e6;
            margin-bottom: 4px;
            word-break: break-word;
        }

        .comment-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-top: 2px;
        }

        .comment-action {
            background: none;
            border: none;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .comment-replies {
            margin-left: 0;
            margin-top: 12px;
        }

        /* Comment Input */
        .comment-input-container {
            padding: 12px 20px;
            background: #222;
            border-top: 1px solid #333;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .comment-input {
            flex: 1;
            background: #333;
            border: none;
            border-radius: 20px;
            padding: 10px 16px;
            color: #fff;
            font-size: 14px;
        }

        .comment-input::placeholder {
            color: #999;
        }

        .send-comment-btn {
            background: #ff0000;
            border: none;
            color: #fff;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 16px;
        }

        .send-comment-btn:disabled {
            background: #444;
            cursor: not-allowed;
        }
        .send-comment-btn .btn-spinner {
            width: 16px; height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: send-btn-spin 0.7s linear infinite;
            display: inline-block;
        }
        @keyframes send-btn-spin {
            to { transform: rotate(360deg); }
        }

        /* Loading Spinner */
        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            pointer-events: none;
        }

        .loading-spinner .buffer-logo {
            font-size: 28px;
        }

        .loading-spinner .buffer-text {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-shadow: 0 1px 6px rgba(0,0,0,0.9);
            color: #fff;
            min-width: 90px;
            text-align: center;
        }

        .comments-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top-color: #ff0000;
            border-radius: 50%;
            animation: spin 0.75s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @keyframes comment-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.15; }
        }

        .comment-new {
            animation: comment-blink 0.4s ease-in-out 3;
        }

        .buffering-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 19;
            pointer-events: none;
        }

        /* No more reels message */
        .no-more-reels {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            padding: 20px;
        }

        .no-more-reels i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }


        .reel-setting-inline-control {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        .reel-setting-inline-control input[type="range"] {
            flex: 1;
            accent-color: #ff0000;
            touch-action: pan-y;
        }

        .reel-setting-inline-control span {
            min-width: 42px;
            text-align: right;
            font-size: 12px;
            color: #bcbcbc;
            font-variant-numeric: tabular-nums;
        }

        .reel-setting-color {
            width: 40px;
            height: 32px;
            border: 1px solid #444;
            border-radius: 6px;
            background: #111;
            padding: 0;
            cursor: pointer;
        }

        /* Sort order dropdown */
        .reel-sort-select {
            width: 100%;
            padding: 10px 12px;
            margin-top: 8px;
            background: #111;
            border: 1px solid #444;
            border-radius: 6px;
            color: #e6e6e6;
            font-size: 13px;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s;
        }

        .reel-sort-select:hover {
            border-color: #666;
        }

        .reel-sort-select:focus {
            border-color: #ff0000;
        }

        .reel-sort-select option {
            background: #1a1a1a;
            color: #e6e6e6;
            padding: 8px;
        }

        /* Premium Video Overlay */
        .reel-premium-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            padding: 20px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .reel-premium-icon {
            font-size: 64px;
            color: #ff0000;
            margin-bottom: 16px;
            animation: pulse-lock 2s ease-in-out infinite;
        }

        @keyframes pulse-lock {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.05);
                opacity: 0.9;
            }
        }

        .reel-premium-title {
            font-size: 22px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
            text-align: center;
        }

        .reel-premium-message {
            font-size: 15px;
            color: #d0d0d0;
            text-align: center;
            margin-bottom: 24px;
            max-width: 320px;
            line-height: 1.5;
        }

        .reel-premium-actions {
            display: flex;
            gap: 12px;
            width: 100%;
            max-width: 340px;
        }

        .reel-premium-btn {
            flex: 1;
            padding: 14px 20px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            text-align: center;
            display: inline-block;
        }

        .reel-premium-btn-primary {
            background: #ff0000;
            color: #fff;
        }

        .reel-premium-btn-primary:hover {
            background: #cc0000;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
        }

        .reel-premium-btn-secondary {
            background: #2a2a2a;
            color: #e6e6e6;
            border: 1px solid #444;
        }

        .reel-premium-btn-secondary:hover {
            background: #333;
            border-color: #666;
        }

        .no-more-reels p {
            font-size: 16px;
            opacity: 0.7;
        }

        /* Share Modal */
        .reel-share-buttons { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
        .reel-share-btn { background:none; border:none; cursor:pointer; width:100%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:transform 0.2s; }
        .reel-share-btn i { font-size:16px; pointer-events:none; }
        .reel-share-btn:hover { transform:scale(1.08); }
        .reel-share-btn.whatsapp { background:#25D366; }
        .reel-share-btn.facebook { background:#1877F2; }
        .reel-share-btn.twitter { background:#000; }
        .reel-share-btn.instagram { background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
        .reel-share-btn.telegram { background:#0088cc; }
        .reel-share-btn.copylink { background:#6c757d; }

        /* Delete Confirm Modal */
        .reel-confirm-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:10000; align-items:center; justify-content:center; padding:16px; }
        .reel-confirm-modal.open { display:flex; }
        .reel-confirm-sheet { background:#1e1e1e; border:1px solid rgba(255,255,255,0.1); border-radius:14px; width:100%; max-width:320px; padding:28px 22px 22px; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.7); }
        .reel-confirm-title { font-size:18px; font-weight:700; text-align:center; margin-bottom:8px; }
        .reel-confirm-body { font-size:14px; color:#aaa; text-align:center; margin-bottom:24px; }
        .reel-confirm-btns { display:flex; gap:10px; }
        .reel-confirm-btn-yes { flex:1; background:#e53935; border:none; color:#fff; border-radius:8px; padding:13px; font-size:15px; font-weight:600; cursor:pointer; }
        .reel-confirm-btn-cancel { flex:1; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:#fff; border-radius:8px; padding:13px; font-size:15px; cursor:pointer; }