/* beat.css — โมดัล 🎵 Beat + การ์ดเพลงในโพสต์
   [4 ก.ย. 2569 — เลน Beat] ใช้ตัวแปร/โครงเดียวกับโมดัลอื่นของ composer */

/* ---- โมดัลในกล่องพิมพ์ (ยึดขนาดเดียวกับ Mes Studio) ---- */
.mes-beat-box { width: min(1100px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column; }
.mes-beat-frame-wrap { flex: 1; min-height: 0; background: #141416; border-radius: 0 0 12px 12px; overflow: hidden; }
#mes-beat-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---- การ์ดเพลงในโพสต์/ฟีด ---- */
.mes-beat-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1c1c22, #232a33);
  border: 1px solid #343b46; border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; cursor: pointer;
  max-width: 460px; user-select: none;
}
.mes-beat-card:hover { border-color: #0a84ff; }
.mes-beat-card.is-playing { border-color: #30d158; box-shadow: 0 0 14px rgba(48, 209, 88, .25); }
.mes-beat-card.is-bad { border-color: #ff453a; opacity: .7; cursor: not-allowed; }
.mes-beat-card.is-bad .mes-beat-card-meta::after { content: ' · เพลงนี้เสียหาย'; color: #ff453a; }
.mes-beat-card-ic { font-size: 26px; line-height: 1; }
.mes-beat-card-info { flex: 1; min-width: 0; }
.mes-beat-card-name { font-weight: 700; font-size: 14px; color: #f2f2f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mes-beat-card-meta { font-size: 11.5px; color: #9aa0ab; margin-top: 2px; }
.mes-beat-card-play {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: #0a84ff; color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.mes-beat-card.is-playing .mes-beat-card-play { background: #30d158; color: #052; }