/* VMESTA v119 — deterministic music activation and one sticker search. */

/* A card timeline is inert until Play selects that exact track. This prevents
   vertical mobile swipes from grabbing the range thumb. */
html:root body .vmesta-track-player:not(.is-track-active) .vmesta-track-wave svg {
  opacity: 0 !important;
  pointer-events: none !important;
}
html:root body .vmesta-track-player .vmesta-track-wave svg {
  transition: opacity .16s ease;
}
html:root body .vmesta-track-player .vmesta-track-wave input:disabled {
  cursor: default !important;
  pointer-events: none !important;
  touch-action: pan-y !important;
}
html:root body .vmesta-track-player.is-track-active .vmesta-track-wave input:not(:disabled) {
  pointer-events: auto !important;
  touch-action: none !important;
}
html:root body .vmesta-track-play {
  touch-action: manipulation !important;
}

/* There is one search in the picker header. The legacy nested search is
   hidden as a defensive fallback for cached/dynamically restored markup. */
html:root body .emoji-picker-sticker-view > .emoji-sticker-search-wrap {
  display: none !important;
}

/* The reset control is an actual close button now. */
html:root body .global-music-inline-close svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

@media (max-width: 767px) {
  html:root body .vmesta-track-player:not(.is-track-active) .vmesta-track-timeline {
    touch-action: pan-y !important;
  }
}

/* Theme-colour consistency in the profile drawer. */
html:root body #profile-left-rail .profile-sidebar-navigation > .nav-item > svg,
html:root body #profile-left-rail .profile-sidebar-more-toggle svg,
html:root body #profile-left-rail .profile-sidebar-more-menu > button > svg {
  color: var(--vmesta-ui-primary, var(--color-dynamic, #2583ff)) !important;
  fill: none !important;
  stroke: currentColor !important;
}
html:root body #profile-left-rail .profile-sidebar-more-menu {
  background: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 8%, var(--vmesta-ui-panel, #fff)) !important;
  border-radius: 0 !important;
}
html:root body #profile-left-rail .profile-sidebar-more-menu > button {
  background: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 6%, var(--vmesta-ui-panel, #fff)) !important;
  color: var(--vmesta-ui-text, var(--adaptive-text-primary, #173f73)) !important;
}
html:root body #profile-left-rail .profile-sidebar-more-menu > button small {
  color: var(--vmesta-ui-muted, var(--adaptive-text-muted, #64748b)) !important;
}

/* Friend previews stay grouped; the outer padding provides breathing room. */
html:root body #friends-list-container {
  justify-content: center !important;
  gap: .45rem !important;
  padding-inline: 1rem !important;
}

.friend-family-menu-action {
  display: grid;
  width: 100%;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  padding: .72rem .82rem;
  border: 0;
  background: transparent;
  color: var(--vmesta-ui-text, var(--adaptive-text-primary, #173f73));
  text-align: left;
}
.friend-family-menu-action:hover { background: color-mix(in srgb, var(--vmesta-ui-primary, #2583ff) 9%, transparent); }
.friend-family-menu-action svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--vmesta-ui-primary, #2583ff); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.friend-family-menu-action span { display: grid; gap: .08rem; }
.friend-family-menu-action strong { font-size: .7rem; }
.friend-family-menu-action small { color: var(--vmesta-ui-muted, #64748b); font-size: .52rem; }

/* Album art uses guaranteed readable copy, including covers discovered after
   the initial chat/feed paint. */
html:root body .vmesta-track-player.is-cover-ready :is(.vmesta-track-head strong,.vmesta-track-head span,.vmesta-track-meta,.vmesta-track-time,.vmesta-track-footer small),
html:root body .global-music-panel.has-track-cover :is(.global-music-title,.global-music-footer small,.global-music-footer time) {
  color: #fff !important;
  text-shadow: 0 1px 3px rgb(0 0 0 / .78) !important;
}
html:root body .vmesta-track-player.is-cover-ready::before,
html:root body .global-music-panel.has-track-cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(4 10 20 / .82), rgb(4 10 20 / .52)) !important;
  pointer-events: none;
}

/* The desktop header player keeps fixed control columns and cannot collapse
   the title/wave under the close button. */
@media (min-width: 768px) {
  html:root body .site-brand-player .global-music-dock { left: calc(100% + 1.35rem) !important; }
  html:root body .site-brand-player .global-music-panel {
    width: clamp(15rem, 19vw, 18rem) !important;
    min-width: 15rem !important;
    grid-template-columns: 2rem 1.8rem minmax(6.5rem, 1fr) auto !important;
    gap: .3rem !important;
    padding: .22rem .3rem !important;
    border-radius: .72rem !important;
  }
  html:root body .site-brand-player .global-music-inline-close { width: 1.8rem !important; height: 1.8rem !important; }
}

/* Notification title belongs to the back control instead of floating in the
   centre of the desktop popover. */
html:root body #notifications-dropdown .notifications-dropdown-head {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  justify-content: initial !important;
  gap: .45rem !important;
}
html:root body #notifications-dropdown .notifications-dropdown-head > div:nth-child(2) { text-align: left !important; }

/* Post viewer: the complete panel rises from below after its first frame is
   prepared, avoiding the previous scale/position flash. */
html:root body #post-viewer-panel {
  transition: transform .32s cubic-bezier(.2,.78,.25,1), opacity .22s ease !important;
  will-change: transform, opacity;
}
html:root body #post-viewer-panel.is-post-viewer-entering { transform: translateY(2.5rem) scale(.985) !important; }
html:root body #post-viewer.is-post-viewer-open #post-viewer-panel { transform: translateY(0) scale(1) !important; }

@media (max-width: 767px) {
  /* v118 accidentally made the fixed header a shrink-to-content flex item
     while profile settings were open. Keep its normal full-width shell. */
  html:root body:has(#cover-animation-panel:not(.hidden)) #site-header {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  html:root body:has(#cover-animation-panel:not(.hidden)) #site-header > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root body .messenger-main-heading { display: flex !important; align-items: center !important; gap: .45rem !important; min-width: 0 !important; }
  html:root body .messenger-list-back { display: grid !important; width: 2.45rem !important; height: 2.45rem !important; flex: 0 0 2.45rem !important; place-items: center !important; border: 0 !important; border-radius: .78rem !important; background: var(--msg-accent-soft) !important; color: var(--msg-accent) !important; }
  html:root body .messenger-list-back svg { width: 1.05rem !important; height: 1.05rem !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; }

  html:root body .messenger-recording-panel.is-locked .messenger-recording-status {
    position: absolute !important;
    z-index: 8 !important;
    right: auto !important;
    bottom: calc(100% + .42rem) !important;
    left: .3rem !important;
    display: flex !important;
    width: min(18rem, calc(100vw - 5rem)) !important;
    max-width: calc(100vw - 5rem) !important;
    min-height: 1.95rem !important;
    padding: .35rem .58rem !important;
    border-radius: 999px !important;
    background: var(--vmesta-ui-panel, var(--msg-panel, #fff)) !important;
    box-shadow: 0 .34rem .9rem rgb(2 12 28 / .18) !important;
    overflow: hidden !important;
  }
  html:root body .messenger-recording-panel.is-locked .messenger-recording-status > span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html:root body .messenger-recording-panel .messenger-recording-send svg,
  html:root body .messenger-recording-panel .messenger-recording-send svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html:root body[data-mobile-right-context="profile"] .mobile-achievements-header > div { visibility: hidden !important; }
  html:root body #profile-right-rail { border-radius: 0 !important; }
  html:root body #tab-friend-signals .signal-sidebar-chevron { display: grid !important; visibility: visible !important; opacity: 1 !important; }

  html:root body .mobile-profile-quick-menu .mobile-quick-settings-title { display: grid; gap: .12rem; padding: .45rem .72rem .25rem; }
  html:root body .mobile-profile-quick-menu .mobile-quick-settings-title small { color: var(--vmesta-ui-primary,#2583ff); font-size: .55rem; font-weight: 900; letter-spacing: .14em; }
  html:root body .mobile-profile-quick-menu .mobile-quick-settings-title strong { color: var(--vmesta-ui-text,#173f73); font-size: .9rem; }
  html:root body .mobile-profile-quick-menu .mobile-quick-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; }
  html:root body .mobile-profile-quick-menu .mobile-quick-theme-grid > button { min-height: 4.2rem !important; grid-template-columns: 2.5rem minmax(0,1fr) !important; background: color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 7%,var(--vmesta-ui-panel,#fff)) !important; }
  html:root body .mobile-profile-quick-menu .mobile-quick-theme-grid i { display:block; width:2.3rem; height:2.3rem; border-radius:.65rem; box-shadow:inset 0 0 0 1px rgb(100 116 139 / .16); }
  html:root body .mobile-profile-quick-menu .mobile-quick-theme-grid i.is-light { background: linear-gradient(#fff 45%,#e7eef8 45%); }
  html:root body .mobile-profile-quick-menu .mobile-quick-theme-grid i.is-dark { background: linear-gradient(#172236 45%,#334155 45%); }
}