:root {
  /* Height of the fixed bottom navigation bar */
  --bottom-bar-h: 64px; /* keep in sync with .bottom-bar height */
  --ui-icon-size: 36px;
  --ui-bottom-overlay-y: 7%;
  --bottom-nav-icon-size: 28px;
  --bottom-nav-icon-size-add: 48px;
}

/* ==========================================
save screen ke issue se ye rule liye gya h
=========================================== */
html,
body,
#av-wrapper {
  background-color: #100c0c !important;
}
/* ==========================================
me-section screen ke issue se ye rule liye gya h
=========================================== */



/* Global rule to remove blue-ish tap highlights (Chrome/Safari mobile) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Disable native browser image/iframe ghost drag */
img,
iframe {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #100c0c;
  /* border: 5px solid rgb(0, 255, 242);  */
}

:root {
  --ui-speed: 260ms;
  --ui-ease: cubic-bezier(.22,.61,.36,1);
  --ui-press-scale: 0.97;
  --ui-top-nudge: clamp(16px, 5vmin, 32px);
}
* {
  transition: all var(--ui-speed) var(--ui-ease);
}

button {
  opacity: 1; /* default look */
  transition: opacity 0.15s ease;
}

/* Tap feedback */
button:active {
  opacity: 0.55; /* on tap */
}



/* search,add,template ko croped nhi hone deta h */
#scale {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  transform-origin: center center;
  box-sizing: border-box;
}




/* =========================================== 
iframe / AVs 
===========================================  */
#av-wrapper {
  position: absolute;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);

  top: var(--native-safe-top, 0px);
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));

  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  box-sizing: border-box;

  --vh: var(--native-vh, 100svh);

  --avail-w: calc(
    100vw
    - env(safe-area-inset-left, 0px)
    - env(safe-area-inset-right, 0px)
  );

  --avail-h: calc(
    var(--vh)
    - var(--native-safe-top, 0px)
    - env(safe-area-inset-bottom, 0px)
    - var(--bottom-bar-h)
  );

  /* Fill the whole available box. The feed is full-screen video like TikTok /
     Reels / Musically, not a 9:16 card floated in the middle of the screen.

     Phones are taller than 9:16 — a 375x812 screen still has 759px once the nav
     bar is out — so the old `height: min(--avail-h, --avail-w * 16 / 9)` capped
     this box at 375x667 and left 47px of dead black above it and 45px below,
     about 12% of the screen. Handing the box the full height instead lets the
     video's object-fit:cover zoom the 9:16 source until it fills and crop the
     sides, which is what the other apps do.

     The width cap stays as it was: it only binds when the screen is WIDER than
     9:16 — i.e. desktop and landscape — where it keeps the feed a phone-shaped
     column instead of stretching a portrait video across the whole window. On a
     portrait phone it is inert, so this is a mobile-only change by construction:
     the old height cap was likewise inert on desktop, which is why the bands
     only ever showed up on a phone. */
  width: min(var(--avail-w), calc(var(--avail-h) * 9 / 16));
  height: var(--avail-h);
}
/* =========================================== 
iframe / AVs 
===========================================  */





/* Scale block removed to prevent conflicts */




/* Saved AVs grid container (for vertical scroll only in saves grid) */
.saved-avs-grid-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5em;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0.5em;
  box-sizing: border-box;
}

.saved-avs-grid-scroll > div {
  flex: 0 0 calc(31.33% - 1em);
  max-width: calc(31.33% - 1em);
  aspect-ratio: 9 / 16;
}

@media (max-width: 600px) {
  .saved-avs-grid-scroll > div {
    flex: 0 0 calc(31.33% - 0.6em);
    max-width: calc(31.33% - 0.6em);
  }
}

/* Top bar wrapper for animation (mobile-first, rem-based spacing, better alignment) */
#feed-chrome-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  transform: translate3d(0, var(--feed-chrome-shift, 0px), 0);
  transition: none;
  will-change: transform;
}

#feed-chrome-layer > * {
  pointer-events: auto;
}

#top-bar-wrapper {
  position: absolute;
  top: auto;
  bottom: 5%;

  /* full width minus safe-area paddings, but capped with a sensible max */
  width: calc(100% - (env(safe-area-inset-left, 1.2rem) + env(safe-area-inset-right, 1.2rem)));
  /* configurable inner cap for very wide screens */
  --topbar-outer-max: 46rem; /* keep previous cap */
  max-width: var(--topbar-outer-max);

  z-index: 10;
  transition: transform 0.18s var(--ui-ease), opacity 0.16s var(--ui-ease);
  transform: translateX(0%);
  opacity: 1;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  justify-content: center; /* center inner .top-bar so left/right spacing is consistent */
}

/* inner bar keeps its own max width so items don't stretch on large screens */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  gap: 0.5rem; /* smaller, consistent gap */
  padding: 0.25rem 0.6rem; /* more compact padding for small screens */
  width: 100%;
  box-sizing: border-box;
  /* inner cap slightly smaller than outer so there's breathing room */
  --topbar-inner-max: clamp(28rem, 88vw, 42rem);
  max-width: var(--topbar-inner-max);
  margin: 0 auto; /* center the inner bar inside the wrapper */
}

.top-bar .left-section,
.top-bar .right-section {
  min-width: 0; /* allow children to shrink on small screens */
  display: flex;
  align-items: center;
  gap: 0rem;
  max-width: 48rem; /* keeps layout compact on wide screens */
  
}

.top-bar {
  gap: 0.225rem;
}

.top-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 auto;
  display: block;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 0.25em;
  position: relative;
  top: -0.1em;
}
.right-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.175rem;
}



.views-box {
  display: block;
  align-self: center;
  margin-right: 0rem;
  transform: translateY(0.05em);
  max-height: clamp(1.4rem, 2.2vmin, 2.2rem);
  object-fit: contain;
}

.title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 0.9em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.65);
}



/* Bottom overlay groups */
#bottom-overlay-wrapper {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.bottom-overlay-left {
  position: absolute;
  bottom: var(--ui-bottom-overlay-y);
  right: 6.7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3em;
  z-index: 9999;
  pointer-events: auto;
  max-width: 90%;
}

/* Bottom overlay groups */
.bottom-overlay-right {
  position: absolute;
  bottom: calc(var(--ui-bottom-overlay-y) - 2%);
  left: 5.5%;
  display: flex;
  align-items: center;
  gap: 0rem;
  z-index: 9999;
  pointer-events: auto;
  max-width: 90%;
}



#followButton {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;

  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 8px;

  /* Closer to Instagram Reels visual proportions */
  padding: 0.5em 0.8em;
  margin-right: auto;
  align-self: center;
  
  line-height: 1;

  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

#followButton:hover,
#followButton:active {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

/* Share button — PURE image only (same as nav arrows) */
.share-btn {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.share-btn img {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  object-fit: contain;

  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  display: block;
}


#timer-circle {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  z-index: 9999;
  gap: 0.375rem;
}

/* More icon — Instagram Reels style music box */
#more-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  cursor: pointer;

  display: block;
  box-sizing: border-box;

  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 6px;

  margin-left: -53.5%;

  box-shadow: none !important;
  filter: none !important;
}




/* Remix button — PURE image only (same as nav arrows) */
.remix-btn-circle {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.remix-btn-circle img,
.remix-btn-circle svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  object-fit: contain;
  

  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  
}



.bottom-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.bottom-overlay-left .remix-btn-circle {
  gap: var(--ui-bottom-label-gap, calc(var(--ui-icon-size) * 0.18));
}

.bottom-overlay-label {
  color: #fff;
  font-size: var(--ui-bottom-label-size, calc(var(--ui-icon-size) * 0.22));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  min-height: 1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}




.circle-bg {
  fill: none;
  stroke: #444;
  stroke-width: 2.5;
}

.circle-progress {
  fill: none;
  stroke: #0f0;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s linear;
}

/* ===============================================================
Persistent Single-Tree Tab Views
=============================================================== */
.smile-tab-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#view-home {
  background: transparent;
  pointer-events: none;
}

#view-home > * {
  pointer-events: auto;
}

#view-template,
#view-search,
#view-me {
  background: #100c0c !important;
  z-index: 20;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Bottom navigation */
.bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--bottom-bar-h);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #100c0c;
  z-index: 100;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

/* Partitions: Top and End are hidden on mobile by default */
.bottom-bar-top,
.bottom-bar-end {
  display: none;
}

.bottom-bar-mid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}

.bottom-bar button,
.bottom-bar .bottom-nav-btn {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 2px 0;
  margin: 0;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bottom-bar button img,
.bottom-bar .bottom-nav-btn img {
  width: var(--bottom-nav-icon-size);
  height: var(--bottom-nav-icon-size);
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Add (+) button matches original prominent size */
.bottom-bar button#bottomCreateBtn img,
.bottom-bar button[data-tab="create"] img,
.bottom-bar button img[src*="add"] {
  width: var(--bottom-nav-icon-size-add) !important;
  height: var(--bottom-nav-icon-size-add) !important;
}

#bottomCreateBtn .bottom-bar-label,
.bottom-bar button[data-tab="create"] .bottom-bar-label {
  display: none !important;
}

.bottom-bar .bottom-bar-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.75;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.1px;
  pointer-events: none;
}

.bottom-bar button.active .bottom-bar-label,
.bottom-bar .bottom-nav-btn.active .bottom-bar-label {
  opacity: 1;
  font-weight: 600;
}

/* =========================================== 
nav-controls 
===========================================  */
.nav-left-controls,
.nav-right-controls {
  position: absolute;
  bottom: 24%;

  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-left-controls {
  left: 3%;
}
.nav-right-controls {
  right: 3%;
}

.nav-btn {
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.nav-btn img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.nav-btn:active,
.nav-btn:focus {
  outline: none;
  background: transparent;
  box-shadow: none;
}
/* =========================================== 
nav-controls 
===========================================  */



#iframe-wrapper {
  position: relative;
  overflow: hidden;
}

#iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  transition: opacity 0.32s var(--ease-smooth); /* Smooth, quicker fade */
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
#iframe-wrapper iframe {
  transition: none;
}
}







/* Overlay layer for modals/popups */
#overlay-layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  z-index: 9998;
  cursor: default;
}

/* Overlay layer for remix/edit popup - now with blur effect */


/* Popup Base Styles for More popup */
.popup-drag {
  width: 3rem;
  height: 0.25em;
  border-radius: 0.185em;
  background: rgba(255,255,255,0.4);
  margin-bottom: 1em;
}
.popup-content {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8%;
  flex-wrap: wrap;
}
.popup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  touch-action: manipulation;
  user-select: none;
  border-radius: 16em;
  padding: 0.7rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
#top-bar-wrapper,
#iframe-wrapper iframe {
  transition: none !important;
}
}


  /* ===============================================================
Hide shell UI before JS router/tab restore to prevent flicker
=============================================================== */
body.app-preload #top-bar-wrapper,
body.app-preload #bottom-overlay-wrapper,
body.app-preload .nav-left-controls,
body.app-preload .nav-right-controls,
body.app-preload .bottom-bar {
  visibility: hidden;
}
/* ===============================================================
Hide shell UI before JS router/tab restore to prevent flicker
=============================================================== */


/* Important */
.nav-left-controls,
.nav-right-controls,
.nav-btn {
  touch-action: none; /* 🔥 THIS IS THE KEY */
}