/* UPDATE 07 — cleaner Shorts screen:
   categories are available from the three-dot menu instead of covering the video. */
.top.safank-real-top{
  height:64px !important;
  background:transparent !important;
  border-bottom:0 !important;
  pointer-events:none !important;
  padding:0 14px !important;
}
.top.safank-real-top .safank-header-icon,
#modeMenuBtn{
  pointer-events:auto !important;
}
#safankHeaderSearch{
  left:12px !important;
  top:8px !important;
  width:42px !important;
  height:42px !important;
}
#safankHeaderSearch svg{
  width:27px !important;
  height:27px !important;
}
#notifBtn{
  display:none !important;
}
/* Three dots: small, white, unobtrusive. */
#modeMenuBtn{
  position:absolute !important;
  right:12px !important;
  top:8px !important;
  width:42px !important;
  height:42px !important;
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:30px !important;
  line-height:38px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  text-shadow:0 1px 5px rgba(0,0,0,.9) !important;
}
/* Hide the horizontal category row completely. */
#contentFilters{
  display:none !important;
}
/* Menu opened from the three dots. */
.mode-menu{
  position:fixed !important;
  top:54px !important;
  right:12px !important;
  width:190px !important;
  max-height:70vh !important;
  overflow:auto !important;
  padding:8px !important;
  background:rgba(18,18,18,.96) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.5) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  z-index:120 !important;
  display:none !important;
  pointer-events:auto !important;
  touch-action:auto !important;
}
.mode-menu.open{display:block !important;}
.mode-menu-title{
  color:#999 !important;
  font-size:11px !important;
  font-weight:700 !important;
  padding:7px 10px 8px !important;
}
.mode-item{
  display:block !important;
  width:100% !important;
  border:0 !important;
  background:transparent !important;
  color:#ddd !important;
  text-align:left !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}
.mode-item:hover,.mode-item.active{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.mode-item.active::after{
  content:"✓";
  float:right;
  color:#00E676;
}
/* Let the first video start immediately under the browser viewport. */
#feed{
  margin-top:0 !important;
  height:100dvh !important;
  width:100vw !important;
}
#feed .card{
  height:100dvh !important;
  min-height:100dvh !important;
  width:100vw !important;
}
/* Keep the video itself visually clean: no caption/name block. */
#feed .info .creatorLink,
#feed .info b,
#feed .info small,
#feed .info div:not(.followBtn),
#feed .info br{
  display:none !important;
}
#feed .info{
  left:24px !important;
  bottom:78px !important;
  max-width:none !important;
}
#feed .followBtn{
  margin:0 !important;
  font-size:13px !important;
  padding:8px 17px !important;
}
/* Do not show an extra title/caption anywhere in the media card. */
#feed .card .caption,
#feed .card .description,
#feed .card .title,
#feed .card .video-title,
#feed .card .video-description{
  display:none !important;
}
@media(max-width:600px){
  #modeMenuBtn{right:8px !important;}
  .mode-menu{right:8px !important;top:54px !important;width:185px !important;}
}
/* UPDATE 08 — notifications live inside the three-dot menu, above categories. */
.menu-notification{display:flex !important;align-items:center !important;gap:8px !important;position:relative !important;}
.menu-notification .menu-notif-badge{margin-left:auto !important;width:8px !important;height:8px !important;border-radius:50% !important;background:#ff2d55 !important;display:none !important;box-shadow:0 0 0 2px #121212 !important;}
.mode-menu-divider{height:1px !important;background:rgba(255,255,255,.08) !important;margin:4px 6px 5px !important;}
/* The feed ends exactly where the bottom navigation begins. */
#feed{height:calc(100dvh - 72px) !important;margin-top:0 !important;}
#feed .card{height:calc(100dvh - 72px) !important;min-height:calc(100dvh - 72px) !important;flex:0 0 calc(100dvh - 72px) !important;}
#feed .card video,#feed .card img.postImage{height:100% !important;width:100vw !important;}