/* ==========================================================================
   Needle on the Sketch — Phase 3 Enhancements stylesheet
   --------------------------------------------------------------------------
   Loads after styles.css and enhancements.css. Additive only; uses unique
   .nos3- prefix for almost everything to avoid collisions.
   ========================================================================== */

:root {
    --nos3-accent: var(--primary-yellow, #ffd700);
    --nos3-accent-2: var(--accent-secondary, #d4a847);
    --nos3-bg: var(--bg-primary, #1a1510);
    --nos3-panel: var(--card-bg, #2a2318);
    --nos3-panel-2: var(--secondary-black, #2a2318);
    --nos3-text: var(--text-primary, #f5e6c8);
    --nos3-muted: var(--text-muted, #8a7560);
    --nos3-border: var(--border-color, rgba(255, 255, 255, 0.12));
    --nos3-radius: 12px;
    --nos3-radius-sm: 8px;
    --nos3-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    --nos3-video-tint: rgba(255, 215, 0, 0.0);

    /* Override the platform's --font-display / --font-body with readable
       webfonts. The originals (Bebas Neue / Impact) felt cramped and the
       fallback chain produced a pixelated look on some systems. */
    --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Apply the readable family across the platform without touching styles.css.
   Headings, page titles and primary CTAs use Outfit (geometric, clean).
   Everything else uses Inter (highly legible UI font). */
html, body,
button, input, select, textarea {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.page-title, .page-header h1, .page-header h2,
.fam-hero-title, .nos-fam-hero-title,
.section-title, .video-title, .channel-name,
.btn-primary, .btn-secondary, .upload-btn,
.tab-btn, .nav-link, .sidebar-item {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}
/* Body / paragraph elements stay on Inter even if they were previously
   forced to the display font for visual flair. */
p, span, li, td, th, label, small, em, strong, .video-meta, .video-description,
.comment-text, .channel-description, .video-info, .nav-search input {
    font-family: var(--font-body);
}

/* Base buttons (only inside our surfaces) */
.nos3-btn {
    appearance: none;
    border: 1px solid var(--nos3-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--nos3-text);
    padding: 8px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.nos3-btn:hover { background: rgba(255, 255, 255, 0.08); }
.nos3-btn:active { transform: translateY(1px); }
.nos3-btn--primary {
    background: linear-gradient(135deg, var(--nos3-accent), var(--nos3-accent-2));
    color: #1a1510;
    border-color: transparent;
    font-weight: 600;
}
.nos3-btn--primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, var(--nos3-accent), var(--nos3-accent-2)); }
.nos3-btn--ghost { background: transparent; }
.nos3-icon-btn {
    appearance: none;
    border: 0; background: transparent; color: inherit; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.nos3-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.nos3-input, .nos3-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    color: var(--nos3-text);
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius-sm);
    padding: 10px 12px;
    font: inherit; font-size: 13px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.nos3-input:focus, .nos3-textarea:focus {
    border-color: var(--nos3-accent);
    background: rgba(0, 0, 0, 0.35);
}
.nos3-textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.nos3-chip {
    border: 1px solid var(--nos3-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--nos3-text);
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 12px;
    font: inherit; font-size: 12px;
    transition: background .15s ease, border-color .15s ease;
}
.nos3-chip:hover { background: rgba(255, 255, 255, 0.1); }
.nos3-chip.is-active {
    background: var(--nos3-accent);
    color: #1a1510;
    border-color: transparent;
}
.nos3-row { display: flex; align-items: center; }
.nos3-row--gap { gap: 8px; }
.nos3-row--space { justify-content: space-between; }
.nos3-row--wrap { flex-wrap: wrap; }
.nos3-muted { color: var(--nos3-muted); }
.nos3-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Toast fallback (only used if NoS toast not present)
   -------------------------------------------------------------------------- */
.nos3-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 100050;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.nos3-toast {
    background: var(--nos3-panel);
    color: var(--nos3-text);
    border: 1px solid var(--nos3-border);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: var(--nos3-shadow);
    pointer-events: auto;
    transform: translateY(0);
    transition: transform .25s ease, opacity .25s ease;
    max-width: 320px;
    font-size: 14px;
}
.nos3-toast--success { border-left: 4px solid var(--nos3-accent); }
.nos3-toast--info    { border-left: 4px solid #7ba4c7; }
.nos3-toast--out     { opacity: 0; transform: translateY(8px); }

/* --------------------------------------------------------------------------
   Theme switcher modal
   -------------------------------------------------------------------------- */
.nos3-theme-switcher,
.nos3-sleep-menu,
.nos3-speed-pop,
.nos3-modal {
    position: fixed; inset: 0; z-index: 100100;
    background: rgba(0, 0, 0, 0.55);
    display: grid; place-items: center;
    padding: 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: nos3-fade .15s ease;
}
@keyframes nos3-fade { from { opacity: 0 } to { opacity: 1 } }

.nos3-theme-switcher__panel,
.nos3-sleep-menu__panel,
.nos3-speed-pop__panel,
.nos3-modal__panel {
    background: var(--nos3-panel);
    color: var(--nos3-text);
    border: 1px solid var(--nos3-border);
    border-radius: 16px;
    padding: 18px 18px 22px;
    box-shadow: var(--nos3-shadow);
    width: min(520px, 100%);
}
.nos3-theme-switcher__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.nos3-theme-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.nos3-theme-card {
    appearance: none; border: 1px solid var(--nos3-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--nos3-text);
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    transition: transform .12s ease, border-color .15s ease;
}
.nos3-theme-card:hover { transform: translateY(-2px); border-color: var(--nos3-accent); }
.nos3-theme-card.is-active { border-color: var(--nos3-accent); box-shadow: inset 0 0 0 1px var(--nos3-accent); }
.nos3-theme-swatch {
    display: block; width: 100%; height: 36px; border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}
.nos3-theme-label { font-weight: 600; font-size: 13px; }

/* --------------------------------------------------------------------------
   Side panels (Bookmarks / Notes / Reactions / Share)
   -------------------------------------------------------------------------- */
.nos3-side-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.nos3-panel {
    background: var(--nos3-panel);
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius);
    overflow: hidden;
}
.nos3-panel__summary {
    list-style: none;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    user-select: none;
}
.nos3-panel__summary::-webkit-details-marker { display: none; }
.nos3-panel[open] .nos3-panel__summary { border-bottom: 1px solid var(--nos3-border); }
.nos3-panel__body { padding: 12px 14px; }

.nos3-bookmark-item, .nos3-reaction-item {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--nos3-border);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
}
.nos3-bookmark-jump {
    appearance: none; border: 0;
    background: rgba(255, 215, 0, 0.12);
    color: var(--nos3-accent);
    font: inherit; font-size: 12px;
    padding: 4px 10px; border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.nos3-bookmark-jump:hover { background: rgba(255, 215, 0, 0.2); }
.nos3-bookmark-label { flex: 1; color: var(--nos3-text); font-size: 13px; }

.nos3-emoji-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.nos3-emoji-btn {
    appearance: none; border: 1px solid var(--nos3-border);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    cursor: pointer;
    padding: 10px;
    font-size: 22px;
    line-height: 1;
    transition: transform .12s ease, background .15s ease;
}
.nos3-emoji-btn:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.08); }
.nos3-reaction-emoji { font-size: 18px; }

/* Floating burst */
.nos3-burst {
    position: absolute;
    pointer-events: none;
    font-size: 28px;
    z-index: 60;
    transform: translate(-50%, 0);
    animation: nos3-burst 1.2s cubic-bezier(.2,.8,.2,1) forwards;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
@keyframes nos3-burst {
    0% { opacity: 1; transform: translate(calc(-50% + 0px), 0) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0)), var(--y, -80px)) scale(1.6); }
}

/* QR Share */
.nos3-share-qr {
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--nos3-border);
    border-radius: 12px;
    padding: 14px;
}
.nos3-qr-img { width: 200px; height: 200px; image-rendering: pixelated; border-radius: 6px; }

/* --------------------------------------------------------------------------
   A-B Loop indicator and Sleep badge — anchored on the player
   -------------------------------------------------------------------------- */
#videoPlayer { position: relative; }

.nos3-ab-indicator,
.nos3-sleep-badge {
    position: absolute;
    top: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--nos3-accent);
    border: 1px solid var(--nos3-border);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    z-index: 50;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}
.nos3-ab-indicator { left: 12px; }
.nos3-sleep-badge { right: 12px; }
.nos3-ab-indicator .nos3-icon-btn,
.nos3-sleep-badge  .nos3-icon-btn { width: 22px; height: 22px; color: inherit; }

/* --------------------------------------------------------------------------
   Sleep menu / Speed popover
   -------------------------------------------------------------------------- */
.nos3-sleep-menu__panel,
.nos3-speed-pop__panel { width: min(380px, 100%); }
.nos3-speed-pop__label {
    font-size: 28px; font-weight: 700; color: var(--nos3-accent);
    text-align: center; margin: 12px 0;
}
.nos3-speed-pop__panel input[type=range] {
    width: 100%; accent-color: var(--nos3-accent);
}

/* --------------------------------------------------------------------------
   Audio-only mode — collapse the actual <video> visual
   -------------------------------------------------------------------------- */
body.nos3-audio-only #videoPlayer .vjs-tech,
body.nos3-audio-only #videoPlayer video {
    visibility: hidden !important;
}
body.nos3-audio-only #videoPlayer {
    background:
        radial-gradient(800px 240px at 50% 50%, rgba(255, 215, 0, 0.18), transparent 70%),
        linear-gradient(180deg, #0e0a06, #1a1510);
    min-height: 220px;
    border-radius: var(--nos3-radius);
    overflow: hidden;
    position: relative;
}
body.nos3-audio-only #videoPlayer::after {
    content: "🎧 Audio-only mode";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--nos3-accent);
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
}
body.nos3-audio-only #videoPlayer .vjs-control-bar {
    visibility: visible !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Header chip → fixed floating dock (bottom-right)
   -------------------------------------------------------------------------- */
.nos3-header-chip {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;          /* below modals (100k+), above page content */
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px;
    background: var(--nos3-panel);
    border: 1px solid var(--nos3-border);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.nos3-header-chip .nos3-icon-btn {
    width: 34px; height: 34px;
    color: var(--nos3-text);
}
.nos3-header-chip .nos3-icon-btn:hover { color: var(--nos3-accent); }

/* Don't collide with the existing "Back to Top" floating button */
#backToTopBtn { bottom: 72px !important; }

@media (max-width: 720px) {
    .nos3-header-chip { right: 10px; bottom: 76px; }
    #backToTopBtn { bottom: 134px !important; }
}

/* --------------------------------------------------------------------------
   Discovery / "For You" page
   -------------------------------------------------------------------------- */
.nos3-extra-page { padding: 24px 32px; }
.nos3-extra-page.active { display: block; }
.nos3-discover-hero {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, rgba(138, 109, 170, 0.18), rgba(255, 215, 0, 0.08));
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.nos3-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.nos3-card { cursor: pointer; }

/* --------------------------------------------------------------------------
   Creator economy (Goals, Tiers, Supporter Wall)
   -------------------------------------------------------------------------- */
.nos3-creator-econ {
    margin: 20px 0;
    display: flex; flex-direction: column; gap: 16px;
}
.nos3-econ-row {
    display: grid; gap: 16px;
    grid-template-columns: 1fr 1.4fr;
}
@media (max-width: 880px) {
    .nos3-econ-row { grid-template-columns: 1fr; }
}
.nos3-econ-card {
    background: var(--nos3-panel);
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius);
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.nos3-econ-card h3 {
    margin: 0 0 12px; font-size: 16px;
    display: flex; align-items: center; gap: 6px;
}
.nos3-econ-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
}
.nos3-progress {
    height: 10px; background: rgba(255, 255, 255, 0.06);
    border-radius: 999px; overflow: hidden;
    border: 1px solid var(--nos3-border);
}
.nos3-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--nos3-accent), var(--nos3-accent-2));
    transition: width .4s ease;
}
.nos3-tiers {
    display: grid; gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) { .nos3-tiers { grid-template-columns: 1fr; } }
.nos3-tier {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--nos3-border);
    border-radius: 12px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .15s ease, border-color .15s ease;
}
.nos3-tier:hover { transform: translateY(-2px); border-color: var(--nos3-accent); }
.nos3-tier.is-active {
    border-color: var(--nos3-accent);
    box-shadow: 0 0 0 1px var(--nos3-accent), 0 12px 24px rgba(255, 215, 0, 0.08);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.06), rgba(255, 255, 255, 0.02));
}
.nos3-tier__head {
    display: flex; align-items: baseline; justify-content: space-between;
}
.nos3-tier__label { font-weight: 700; }
.nos3-tier__price { color: var(--nos3-accent); font-weight: 700; }
.nos3-tier__perks {
    margin: 0; padding-left: 18px;
    font-size: 13px; color: var(--nos3-text);
    display: flex; flex-direction: column; gap: 4px;
}
.nos3-tier__perks li::marker { color: var(--nos3-accent); }

.nos3-supporter-wall {
    background: var(--nos3-panel);
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius);
    padding: 16px 18px;
}
.nos3-supporter-wall h3 { margin: 0 0 10px; font-size: 15px; }
.nos3-supporter-strip {
    display: flex; gap: 10px; overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.nos3-supporter-chip {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--nos3-border);
    border-radius: 999px;
    padding: 6px 12px 6px 6px;
    min-width: 120px;
}
.nos3-supporter-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--nos3-accent), var(--nos3-accent-2));
    color: #1a1510; font-weight: 800; font-size: 12px;
}
.nos3-supporter-name { font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------------------
   Continue Watching strip on Home
   -------------------------------------------------------------------------- */
.nos3-continue {
    margin: 16px 0 24px;
    background: var(--nos3-panel);
    border: 1px solid var(--nos3-border);
    border-radius: var(--nos3-radius);
    padding: 14px 16px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.nos3-continue__head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 10px;
}
.nos3-continue__head h2 { margin: 0; font-size: 16px; }
.nos3-continue__row {
    display: flex; gap: 12px; overflow-x: auto;
    padding-bottom: 6px;
}
.nos3-continue-card {
    flex: 0 0 240px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--nos3-border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
}
.nos3-continue-card:hover { transform: translateY(-2px); border-color: var(--nos3-accent); }
.nos3-continue-thumb {
    position: relative; aspect-ratio: 16/9; background: #000;
    overflow: hidden;
}
.nos3-continue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nos3-continue-fallback {
    width: 100%; height: 100%; display: grid; place-items: center;
    font-size: 32px; color: var(--nos3-muted);
}
.nos3-continue-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: rgba(255, 255, 255, 0.15);
}
.nos3-continue-progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--nos3-accent), var(--nos3-accent-2));
}
.nos3-continue-meta { padding: 8px 10px; }
.nos3-continue-title {
    font-weight: 600; font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Comment timestamp links
   -------------------------------------------------------------------------- */
.nos3-ts-link {
    color: var(--nos3-accent);
    text-decoration: none;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 4px;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
.nos3-ts-link:hover { background: rgba(255, 215, 0, 0.2); text-decoration: underline; }

/* --------------------------------------------------------------------------
   PWA install banner
   -------------------------------------------------------------------------- */
.nos3-install-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    max-width: 520px; margin: 0 auto;
    z-index: 100090;
    display: flex; align-items: center; gap: 12px;
    background: var(--nos3-panel);
    color: var(--nos3-text);
    border: 1px solid var(--nos3-border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--nos3-shadow);
    animation: nos3-slide-up .25s ease;
}
@keyframes nos3-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
.nos3-install-icon { font-size: 22px; }
.nos3-install-text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.nos3-install-text .nos3-muted { font-size: 12px; }
.nos3-install-actions { display: flex; gap: 6px; }

/* --------------------------------------------------------------------------
   Tinted accents driven by current video thumbnail
   -------------------------------------------------------------------------- */
body.nos3-audio-only #videoPlayer,
.nos3-extra-page .nos3-discover-hero {
    box-shadow: inset 0 0 60px var(--nos3-video-tint);
}