/* VMESTA v118 — targeted desktop/mobile recovery fixes. */

/* A track owns its artwork; it must never inherit a profile/avatar cover. */
html:root body .vmesta-track-player {
  --vmesta-track-cover: none;
  contain: layout paint;
}
html:root body .vmesta-track-player::before { background-image: var(--vmesta-track-cover, none) !important; }
html:root body .vmesta-track-wave,
html:root body .vmesta-track-wave input,
html:root body .global-music-wave,
html:root body .global-music-wave input { touch-action: pan-y !important; }
html:root body :is(.vmesta-track-volume-popover,.global-music-volume-popover).is-volume-ported {
  z-index: 30050 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* The large profile cover is edge-to-edge again. */
html:root body #cover-section {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Desktop cover previews fill their cards instead of creating grey side bars. */
html:root body .cover-image-tile .cover-preview-image {
  width: 100% !important;
  min-height: 7rem !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Editing handles remain above the surface they edit. */
html:root body :is(.vmesta-edit-button,.avatar-edit-corner,#edit-profile-btn,#achievement-showcase-edit-button,#avatar-showcase-edit,.profile-interests-edit) {
  z-index: 80 !important;
  isolation: isolate;
}
html:root body :is(#profile-avatar-card,#profile-sidebar-shell,#profile-interests-card,.achievement-showcase-card) { overflow: visible !important; }

/* Restore compact quick-login in the desktop header. */
@media (min-width: 768px) {
  html:root body #top-account-switch-trigger:not([hidden]) { display: grid !important; }
  html:root body #notifications-dropdown.notifications-dropdown-v2 {
    width: min(22rem, calc(100vw - 2rem)) !important;
    max-height: min(31rem, calc(100vh - 5rem)) !important;
  }
  html:root body .global-music-panel {
    width: clamp(12rem, 19vw, 16rem) !important;
    margin-inline: .35rem !important;
    border-radius: .8rem !important;
    clip-path: inset(0 round .8rem) !important;
  }
}

/* Keep selection actions visible even when a custom palette is active. */
html:root body .messenger-selection-toolbar,
html:root body .messenger-selection-toolbar * { opacity: 1 !important; }
html:root body :is(.messenger-selection-close,.messenger-selection-actions button) {
  color: var(--msg-accent,var(--vmesta-ui-primary,#2583ff)) !important;
  background: var(--msg-panel,var(--vmesta-ui-panel,#fff)) !important;
}
html:root body :is(.messenger-selection-close,.messenger-selection-actions button) :is(svg,path,circle) {
  color: currentColor !important;
  stroke: currentColor !important;
}
.messenger-room-quick-reactions { display: grid; gap: .55rem; border: 0; padding: .65rem 0; }
.messenger-room-quick-reactions legend { display: grid; gap: .15rem; color: var(--msg-text,var(--vmesta-ui-text,#173f73)); }
.messenger-room-quick-reactions legend small { color: var(--msg-muted,var(--vmesta-ui-muted,#64748b)); font-size: .6rem; }
.messenger-room-quick-reactions > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.messenger-room-quick-reactions > div label { display: grid !important; width: 2.3rem; height: 2.3rem; min-height: 0 !important; place-items: center; border-radius: .7rem; background: var(--msg-soft,var(--vmesta-ui-soft,#edf4fb)); cursor: pointer; }
.messenger-room-quick-reactions > div input { position: absolute; opacity: 0; pointer-events: none; }
.messenger-room-quick-reactions > div label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--msg-accent,var(--vmesta-ui-primary,#2583ff)); background: color-mix(in srgb,var(--msg-accent,var(--vmesta-ui-primary,#2583ff)) 15%,var(--msg-panel,#fff)); }
.messenger-room-quick-reactions > div span { font-size: 1.1rem; }

@media (max-width: 767px) {
  /* Header stays reachable while the profile editor is open. */
  html:root body #cover-animation-panel:not(.hidden) {
    top: calc(var(--vmesta-mobile-header-height,3.55rem) + env(safe-area-inset-top,0px)) !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html:root body #cover-animation-panel .cover-editor-workspace {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom,0px)) !important;
  }
  html:root body:has(#cover-animation-panel:not(.hidden)) #site-header {
    display: flex !important;
    z-index: 23020 !important;
    pointer-events: auto !important;
  }

  /* Search button remains above decorative header/player layers. */
  html:root body #mobile-header-search {
    position: relative !important;
    z-index: 120 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* One readable theme per row. */
  html:root body .theme-preset-grid { grid-template-columns: 1fr !important; }

  /* Five real friend slots fill the drawer width without the old leading gap. */
  html:root body #friends-list-container {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    min-height: 3.65rem !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .35rem !important;
    margin: 0 !important;
    padding: .35rem .1rem .5rem !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  html:root body #friends-list-container > :is(button,.profile-friend-avatar-skeleton) {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    flex: 0 0 3rem !important;
    margin: 0 !important;
  }

  /* Active profile tab has the same icon/text layout as every other active tab. */
  html:root body #profile-tabs-container .tab-btn:is(.active,.active-tab,.font-bold,.text-blue-500,.text-blue-600) {
    width: auto !important;
    min-width: 6.6rem !important;
    flex: 1 1 6.6rem !important;
    gap: .42rem !important;
    background: color-mix(in srgb,var(--vmesta-ui-primary,#2583ff) 14%,var(--vmesta-ui-panel,#fff)) !important;
    color: var(--vmesta-ui-primary,#2583ff) !important;
  }
  html:root body #profile-tabs-container .tab-btn:is(.active,.active-tab,.font-bold,.text-blue-500,.text-blue-600) .profile-tab-label {
    display: inline-block !important;
    width: auto !important;
    max-width: 6rem !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Drawer/shop surfaces now derive from the selected theme. */
  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;
  }
  html:root body #profile-left-rail .profile-sidebar-more-menu > button {
    background: var(--vmesta-ui-soft,var(--adaptive-surface-2,#edf4fb)) !important;
    color: var(--vmesta-ui-text,var(--adaptive-text-primary,#173f73)) !important;
  }
  html:root body .mobile-profile-quick-menu {
    max-height: calc(100dvh - var(--vmesta-mobile-header-height,3.55rem) - 1rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Rounded, inset compact player in the mobile drawer/header. */
  html:root body .global-music-panel {
    max-width: calc(100% - .5rem) !important;
    margin-inline: .25rem !important;
    border-radius: .85rem !important;
    clip-path: inset(0 round .85rem) !important;
  }

  /* Message action menu starts on the same baseline as the three-dot trigger. */
  html:root body.mobile-chat-open .messenger-conversation-actions > .messenger-chat-menu:not(.is-row-menu) {
    top: 0 !important;
    right: calc(100% + .35rem) !important;
    bottom: auto !important;
  }
}