/* Small enhancements for the YouTube-like prototype */
:root{--yt-muted:rgba(255,255,255,0.65);--yt-bg:#0b0f12;--short-card-w:clamp(216px,24vw,270px)}
.video-card{background:linear-gradient(180deg,transparent,rgba(0,0,0,0.35));}
.video-kind-pill{background:rgba(225,29,72,0.9);color:#fff;box-shadow:0 6px 18px rgba(225,29,72,0.35)}
.video-card .video-duration{font-weight:600;letter-spacing:0.2px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.video-card .thumb{position:relative;border-radius:10px;overflow:hidden;background:#020617;aspect-ratio:16/9}
.video-card .thumb-short{aspect-ratio:9/16}
.video-card-short .video-card-body{padding:0.8rem 0.7rem 0.9rem;gap:0.55rem}
.video-card-short .video-card-body .flex-shrink-0{display:none}
.video-card-short .video-title{white-space:normal;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.28}
.video-card-short .video-card-actions{top:0.75rem;right:0.75rem;bottom:auto}
.video-card-short .video-card-actions button{padding:0.45rem}
.shorts-rail{display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.35rem;scroll-snap-type:x mandatory;scroll-padding-left:0.1rem}
.shorts-rail>*{flex:0 0 var(--short-card-w);scroll-snap-align:start}
.shorts-rail .video-card{height:100%}
.shorts-rail .video-card-short .thumb-short{aspect-ratio:9/16}
.shorts-rail .video-card-short .video-card-body{padding:0.8rem 0.72rem 0.88rem}
.shorts-rail-youtube-history{--short-card-w:clamp(168px,15vw,196px)}
.shorts-rail-youtube-history .video-card-short{border-radius:0.85rem;box-shadow:none}
.shorts-rail-youtube-history .video-card-short .thumb{border-radius:0.85rem}
.shorts-rail-youtube-history .video-card-short .video-card-body{padding:0.62rem 0.55rem 0.68rem}
.shorts-rail-youtube-history .video-card-short .video-title{font-size:0.8rem;line-height:1.18}
.shorts-rail-youtube-history .video-card-short .video-card-actions{display:none}
.shorts-rail-youtube-history .video-card-short .video-kind-pill{display:none}
.shorts-rail-youtube-history .video-card-short .video-duration{display:none}
.shorts-rail::-webkit-scrollbar{height:8px}
.shorts-rail::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.35);border-radius:999px}
.shorts-rail-item .history-meta{margin-top:0.5rem;color:rgba(226,232,240,0.68)}
.shorts-size-note{font-size:0.75rem;line-height:1.25rem;color:rgba(148,163,184,0.95)}
.media-filter-bar{display:inline-flex;align-items:center;gap:0.35rem;padding:0.3rem;border-radius:999px;border:1px solid rgba(148,163,184,0.35);background:rgba(15,23,42,0.35)}
.media-filter-top{position:sticky;top:0.7rem;z-index:35;display:flex;justify-content:flex-end;margin-bottom:0.65rem}
.media-filter-shell{display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.5rem;border-radius:999px;background:rgba(2,6,23,0.52);backdrop-filter:blur(8px)}
.media-filter-label{font-size:0.76rem;color:#cbd5e1;line-height:1.05rem;padding:0 0.2rem}
.media-filter-btn{border:0;background:transparent;color:#cbd5e1;padding:0.4rem 0.78rem;border-radius:999px;font-size:0.78rem;line-height:1.05rem;cursor:pointer;transition:background 0.16s ease,color 0.16s ease}
.media-filter-btn:hover{background:rgba(148,163,184,0.16);color:#f8fafc}
.media-filter-btn.is-active{background:rgba(56,189,248,0.22);color:#f8fafc}
.media-group-hidden{display:none!important}

html.theme-light .video-kind-pill{background:rgba(225,29,72,0.94);color:#fff}
html.theme-light .shorts-rail::-webkit-scrollbar-thumb{background:rgba(71,85,105,0.35)}
html.theme-light .media-filter-bar{background:rgba(148,163,184,0.18);border-color:rgba(71,85,105,0.32)}
html.theme-light .media-filter-shell{background:rgba(255,255,255,0.84)}
html.theme-light .media-filter-label{color:#334155}
html.theme-light .media-filter-btn{color:#334155}
html.theme-light .media-filter-btn:hover{background:rgba(71,85,105,0.14);color:#0f172a}
html.theme-light .media-filter-btn.is-active{background:rgba(14,165,233,0.2);color:#0f172a}

@media (min-width:1024px){
  .video-card:hover{transform:translateY(-6px) scale(1.01)}
}
/* Sidebar tweaks */
#left-nav{transition:all .22s ease}
#left-nav a{color:var(--yt-muted)}
/* small utility */
.lazy{opacity:0;transform:translateY(6px);transition:opacity .36s ease,transform .36s ease}
.lazy.loaded{opacity:1;transform:none}

/* MOBILE UX IMPROVEMENTS */
.touch-target{padding:10px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#mobile-bottom-nav a{transition:background .12s ease}

/* smooth hide/show for the mobile bottom nav (toggled by JS) */
#mobile-bottom-nav{transition:transform .28s cubic-bezier(.2,.9,.2,1);transform:translateY(0);will-change:transform}
#mobile-bottom-nav.hidden-by-scroll{transform:translateY(100%);pointer-events:none;opacity:0.98}



.video-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#020617}
.watch-player-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:70vh;background:#000;display:flex;align-items:center;justify-content:center}
.watch-player-frame.is-short{aspect-ratio:9/16;max-width:min(100%,420px);margin:0 auto}
.watch-player{width:100%;height:100%;object-fit:contain;background:#000}

@supports not (aspect-ratio: 16 / 9) {
  .video-card .thumb{height:0;padding-bottom:56.25%}
}
#header-search-form{min-width:220px;z-index:60;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
#search-toggle{z-index:70}
#header-search-form.search-open{display:block!important;opacity:1;transform:none}

/* search suggestions */
#search-suggestions{max-height:56vh;overflow:auto;border:1px solid rgba(255,255,255,0.04)}
#search-suggestions .item{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer}
#search-suggestions .item:hover, #search-suggestions .item[aria-selected="true"]{background:rgba(255,255,255,0.02)}
#search-suggestions .thumb{width:56px;height:36px;object-fit:cover;border-radius:6px;background:#0b0f12}
#search-suggestions .meta{font-size:13px;color:var(--muted)}
#search-suggestions .title{font-weight:600;color:#e6eef3;font-size:14px}
#search-suggestions .uploader{font-size:12px;color:#9fb0bf}
#search-suggestions .empty{padding:12px 14px;color:#94a3b8;text-align:center}

/* Mobile search suggestions (mirror desktop styles) */
#mobile-search-suggestions, #search-suggestions-overlay, #mobile-search-suggestions{max-height:56vh;overflow:auto;border:1px solid rgba(255,255,255,0.04)}
#mobile-search-suggestions .item, #search-suggestions-overlay .item{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer}
#mobile-search-suggestions .item:hover, #mobile-search-suggestions .item[aria-selected="true"], #search-suggestions-overlay .item:hover, #search-suggestions-overlay .item[aria-selected="true"]{background:rgba(255,255,255,0.02)}
#mobile-search-suggestions .thumb, #search-suggestions-overlay .thumb{width:56px;height:36px;object-fit:cover;border-radius:6px;background:#0b0f12}
#mobile-search-suggestions .meta, #search-suggestions-overlay .meta{font-size:13px;color:var(--muted)}
#mobile-search-suggestions .title, #search-suggestions-overlay .title{font-weight:600;color:#e6eef3;font-size:14px}
#mobile-search-suggestions .uploader, #search-suggestions-overlay .uploader{font-size:12px;color:#9fb0bf}
#mobile-search-suggestions .empty, #search-suggestions-overlay .empty{padding:12px 14px;color:#94a3b8;text-align:center}

/* YouTube-like search input */
.youtube-search-input{height:44px;border-radius:9999px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 20px rgba(2,6,23,0.6);padding-left:3rem;transition:box-shadow .18s ease,transform .12s ease}
.youtube-search-input::placeholder{color:rgba(255,255,255,0.6)}
.youtube-search-input:focus{box-shadow:0 10px 30px rgba(2,6,23,0.7);transform:translateY(-1px);outline:2px solid rgba(59,130,246,0.12)}

/* search removed */
@media(min-width:768px){
  /* make the search more prominent on desktop */
  #header-search-form{max-width:680px}
  .youtube-search-input{height:48px}
}
@media(max-width:767px){
  :root{--short-card-w:min(64vw,246px)}
  .shorts-rail-youtube-history{--short-card-w:min(48vw,186px)}
  .media-filter-top{top:0.45rem;justify-content:flex-start}
  .media-filter-shell{width:100%;justify-content:space-between;border-radius:0.9rem;padding:0.45rem 0.55rem}
  .media-filter-label{font-size:0.72rem}
  .youtube-search-input{height:44px;padding-left:2.75rem;width:140px}
  /* when focused on mobile, allow width to expand with a smooth transition */
  .youtube-search-input:focus{width:calc(100% - 56px);transition:width .18s ease}
}
@media (max-width:767px){
  /* keep watch player visible above the bottom nav on short screens */
  .watch-player-frame{max-height:62vh}
  .watch-player-frame.is-short{max-height:calc(100dvh - 8.5rem)}
  .lg\:col-span-8{grid-column:1/span 1}
  .lg\:col-span-4{grid-column:1/span 1}
  .neon-outline{border-radius:0.6rem}
  /* increase tappable elements */
  .neon-outline a, .neon-outline button{padding:12px}
  /* move related content below the player by default */
  aside{order:2}
  main{order:1}
  /* ensure header search becomes full width and visible */
  #header-search-form{position:static;display:block!important;max-width:none;width:calc(100% - 48px);margin:8px 24px 0 24px;padding:10px;z-index:70}
  #header-search-form input{background:rgba(255,255,255,0.04);padding:12px}
  /* keep content above mobile bottom nav */
  body{padding-bottom:calc(64px + 1rem)}
  /* remove padding for immersive shorts */
  body.shorts-mobile-immersive{padding-bottom:0!important}
  /* lift the floating action button above the bottom nav */
  .fab{right:1.5rem;bottom:calc(64px + 1rem);z-index:60}
  /* move FAB to left on small screens where preferred */
  .fab.left-on-mobile{right:unset;left:1.5rem}
}

@supports not (height: 100dvh) {
  @media (max-width:767px){
    .watch-player-frame.is-short{max-height:calc(100vh - 8.5rem)}
  }
}

/* small-screen FAB override (safety) */
@media (max-width:767px){
  .fab{right:auto;left:1.5rem}
}
  /* visible fallback when JS fails */
  noscript form{display:block}


/* Mobile search overlay */
.mobile-search-overlay{position:fixed;top:0;left:0;right:0;padding:12px 16px;background:rgba(2,6,23,0.98);display:flex;align-items:center;justify-content:center;gap:8px;transform:translateY(-110%);transition:transform .18s ease;z-index:140}
.mobile-search-overlay.open{transform:translateY(0)}
.mobile-search-overlay.hidden{display:none}
.mobile-search-input{flex:1;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:#e6eef3;max-width:720px;width:100%}
#mobile-search-close{position:relative;z-index:145}
/* ensure overlay sits above header and other elements */
@media (max-width:420px){
  .mobile-search-input{font-size:14px}
}
/* small tweak to make the search icon easier to tap */
#mobile-search-button{z-index:200}
#mobile-search-button.pressed{transform:scale(0.96);opacity:0.95;box-shadow:inset 0 0 8px rgba(0,0,0,0.18)}