/* ==========================================================
   CANTAIMY v6.3 — Layout Balance
   Corrects three issues from v6.2 screenshot:
   account overlap, oversized covers, mood cards hidden by player.
   ========================================================== */

/* ----------------------------------------------------------
   1) ACCOUNT CARD — no overlap
   ---------------------------------------------------------- */
.v6-account-card{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  padding:8px !important;
  min-height:0 !important;
}

.v6-account-card .v6-user-chip{
  margin:0 !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  padding:3px 8px 3px 4px !important;
  border-radius:11px !important;
}

.v6-account-actions,
.v61-account-actions{
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:7px !important;
  width:100% !important;
  margin:0 !important;
  align-items:center !important;
}

.v6-mini-action{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:29px !important;
  min-height:29px !important;
  margin:0 !important;
  padding:0 8px !important;
  border-radius:9px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#logoutBtn.v6-mini-action{
  justify-content:center !important;
}

.v6-account{
  align-self:start !important;
}

/* ----------------------------------------------------------
   2) TRACK COVERS — visually smaller
   ---------------------------------------------------------- */

/* Give the cards a fixed, slightly shorter artwork area rather than
   letting the square art dominate the whole middle section. */
.v6-track-grid .track-cover{
  aspect-ratio:auto !important;
  height:clamp(190px,24vh,255px) !important;
  min-height:190px !important;
  max-height:255px !important;
}

.v6-track-grid .track-card h3{
  margin-top:7px !important;
}

.v6-track-grid{
  align-items:start !important;
}

/* ----------------------------------------------------------
   3) MOODS — keep entire section above player
   ---------------------------------------------------------- */

/* Tighten vertical rhythm after track metadata. */
.v6-mood-head{
  margin-top:10px !important;
  margin-bottom:7px !important;
}

.v6-moods{
  margin-bottom:0 !important;
  gap:8px !important;
}

.v6-moods button{
  min-height:54px !important;
  height:54px !important;
  font-size:15px !important;
  padding:0 7px !important;
}

/* Keep feed content within the available main-area height. */
.v6-feed{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.v6-section-head{
  margin-bottom:8px !important;
}

/* Player remains in its own grid row and does not visually eat into content. */
.v6-player{
  position:relative !important;
  z-index:30 !important;
}

/* ----------------------------------------------------------
   FULL-HD / 768-ish laptop screens
   ---------------------------------------------------------- */
@media(max-height:820px) and (min-width:1100px){
  .v6-main{
    grid-template-rows:155px minmax(0,1fr) !important;
  }

  .v6-header{
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .v6-track-grid .track-cover{
    height:210px !important;
    min-height:210px !important;
    max-height:210px !important;
  }

  .v6-track-grid .track-card h3{
    margin-top:6px !important;
  }

  .v6-mood-head{
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  .v6-moods button{
    min-height:48px !important;
    height:48px !important;
    font-size:14px !important;
  }

  .v6-feed{
    padding-top:9px !important;
    padding-bottom:7px !important;
  }

  .v6-player{
    height:82px !important;
    min-height:82px !important;
  }
}

/* Even shorter desktop screens */
@media(max-height:720px) and (min-width:1050px){
  .v6-main{
    grid-template-rows:142px minmax(0,1fr) !important;
  }

  .v6-track-grid .track-cover{
    height:180px !important;
    min-height:180px !important;
    max-height:180px !important;
  }

  .v6-moods button{
    min-height:43px !important;
    height:43px !important;
    font-size:13px !important;
  }

  .v6-player{
    height:72px !important;
    min-height:72px !important;
  }
}

/* Wider desktop: still keep covers restrained */
@media(min-width:1500px) and (min-height:821px){
  .v6-track-grid .track-cover{
    height:245px !important;
    min-height:245px !important;
    max-height:245px !important;
  }
}