/* Music picker modal */
.music-modal {
  position: fixed; inset: 0; z-index: 5000;
  display: none; align-items: flex-end; justify-content: right;
  background: rgba(0,0,0,.45);
}
.music-modal.show { display: flex; }
.music-sheet {
  width: 100%; max-width: 420px;
  max-height: 650px;
  background: var(--card-bg, #fff);
  border-radius: 20px 20px 0 0;
  padding: 16px 14px 24px;
  display: flex; flex-direction: column;
  animation: mmUp .28s ease;
  float: right;
}
@keyframes mmUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.mm-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mm-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.mm-close {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; font-size: 18px; cursor: pointer; color: var(--text);
}
.mm-tabs {
  display: flex; background: var(--bg, #f1f3f5); border-radius: 999px; padding: 3px; margin-bottom: 12px;
}
.mm-tab {
  flex: 1; border: none; border-radius: 999px; padding: 8px;
  background: transparent; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-muted);
}
.mm-tab.active { background: #fff; color: #2563eb; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.mm-search {
  width: 100%; box-sizing: border-box;
  border: none; background: var(--bg, #f1f3f5);
  border-radius: 999px; padding: 12px 16px; font: inherit; margin-bottom: 10px;
}
.mm-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.mm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--border, #f0f0f0);
}
.mm-cover {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: #e8f0fe; flex-shrink: 0;
}
.mm-meta { flex: 1; min-width: 0; }
.mm-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-artist { font-size: 12px; color: var(--text-muted); }
.mm-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mm-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mm-btn.add { background: #e8f0fe; color: #2563eb; }
.mm-progress-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 0 4px 6px 54px;
}
.mm-bar {
  flex: 1; height: 3px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.mm-bar > i { display: block; height: 100%; width: 0; background: #2563eb; }
.mm-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Post music chip */
.post-music {
  display: flex; align-items: right; gap: 10px;
  margin: 8px 0 4px; padding: 8px 10px;
  background: var(--bg, #f5f7fa); border-radius: 12px;
  cursor: pointer;
}
.post-music img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.post-music .pm-info { flex: 1; min-width: 0; }
.post-music .pm-t { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-music .pm-a { font-size: 11px; color: var(--text-muted); }
.post-music .pm-play {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; cursor: pointer;
}

/* Bottom mini player */
.music-player {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px); max-width: 480px;
  z-index: 2000;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e8ecef);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 10px 12px;
  display: none;
  align-items: center; gap: 10px;
}
.music-player.show { display: flex; }
.mp-cover {
  width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #eee;
}
.mp-meta { flex: 1; min-width: 0; }
.mp-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-artist { font-size: 11px; color: var(--text-muted); }
.mp-controls { display: flex; align-items: center; gap: 6px; }
.mp-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mp-btn.ghost { background: transparent; color: var(--text); }
.mp-progress {
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 3px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.mp-progress > i { display: block; height: 100%; width: 0; background: #2563eb; transition: width .15s linear; }

@media (min-width: 1100px) {
  .music-player {
    bottom: 24px;
    left: auto; right: 24px; transform: none;
    max-width: 360px;
  }
  .music-modal { align-items: center; }
  .music-sheet { border-radius: 20px; max-height: 70vh; }
}

@media (min-width: 900px) {
  .music-player {
    bottom: 24px;
    left: auto; right: 24px; transform: none;
    max-width: 360px;
  }
  .music-modal { align-items: center; }
  .music-sheet { border-radius: 20px; max-height: 70vh; }
}

/* bottom bar always clickable */
.bottom-bar {
  z-index: 100 !important;
  pointer-events: auto !important;
}
.music-player {
  z-index: 95 !important;
}
.create-fab {
  pointer-events: auto !important;
  z-index: 101 !important;
}

/* Mini player — bottom bar dan yuqoriroq */
.music-player {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 95 !important;
  cursor: pointer;
}
@media (min-width: 1100px) {
  .music-player {
    left: auto !important;
    right: 24px !important;
    bottom: 28px !important;
    transform: none !important;
  }
}
@media (min-width: 900px) {
  .music-player {
    left: auto !important;
    right: 24px !important;
    bottom: 28px !important;
    transform: none !important;
  }
}

.post-music.is-playing {
  outline: 1px solid rgba(37, 99, 235, 0.35);
}
.post-music .pm-play.is-playing,
.post-music.is-playing .pm-play {
  background: #1d4ed8;
}

/* Full player modal — OK.ru style */
.music-full-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.72);
}
.music-full-modal.show { display: flex; }
.mf-sheet {
  width: 100%;
  max-width: 480px;
  min-height: 0;
  background: #121212;
  color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: mmUp .28s ease;
}
@media (max-width: 899px) {
  .mf-sheet { min-height: 650; }
}
.mf-down {
  align-self: center;
  border: none;
  background: transparent;
  color: #aaa;
  font-size: 22px;
  padding: 8px;
  cursor: pointer;
}
.mf-art-wrap {
  width: min(86vw, 340px);
  aspect-ratio: 1;
  margin: 12px 0 24px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  background: #222;
}
.mf-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-progress-wrap { width: 100%; max-width: 340px; }
.mf-progress-wrap input[type=range] {
  width: 100%;
  accent-color: #f97316;
  height: 4px;
}
.mf-times {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}
.mf-title {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.mf-artist {
  margin-top: 6px;
  font-size: 14px;
  color: #9ca3af;
  text-align: center;
}
.mf-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
}
.mf-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.mf-btn.main {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #f97316;
  color: #111;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf-btn.ghost { opacity: .85; }

@media (min-width: 1100px) {
  .music-full-modal { align-items: center; }
  .mf-sheet { border-radius: 20px; min-height: auto; padding-bottom: 40px; }
}
@media (min-width: 900px) {
  .music-full-modal { align-items: center; }
  .mf-sheet { border-radius: 20px; min-height: auto; padding-bottom: 40px; }
}

/* ===== Theme: light white / dark black, accent BLUE ===== */
.music-player {
  background: #ffffff !important;
  border: 1px solid #e8ecef !important;
  color: #111 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
}
html.dark .music-player,
[data-theme="dark"] .music-player,
body.dark .music-player {
  background: #1c1c1e !important;
  border-color: #333 !important;
  color: #f2f2f7 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
}

.music-player .mp-title { color: inherit; }
.music-player .mp-artist { color: #6b7280; }
html.dark .music-player .mp-artist,
[data-theme="dark"] .music-player .mp-artist,
body.dark .music-player .mp-artist { color: #9ca3af; }

.mp-cover-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8f0fe;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
html.dark .mp-cover-box,
[data-theme="dark"] .mp-cover-box,
body.dark .mp-cover-box { background: #2a2a2e; }

.mp-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.mp-cover-ico {
  position: absolute;
  color: #2563eb;
  font-size: 16px;
  pointer-events: none;
}
.mp-cover[src]:not([src=""]) + .mp-cover-ico { display: none; }
.mp-cover-empty + .mp-cover-ico,
.mp-cover:not([src]) + .mp-cover-ico { display: block; }

.mp-btn {
  background: #2563eb !important;
  color: #fff !important;
}
.mp-btn.ghost {
  background: transparent !important;
  color: inherit !important;
}
.mp-progress > i {
  background: #2563eb !important;
}

/* Full modal */
.music-full-modal { background: rgba(0,0,0,.45) !important; }
.mf-sheet {
  background: #ffffff !important;
  color: #111 !important;
}
html.dark .mf-sheet,
[data-theme="dark"] .mf-sheet,
body.dark .mf-sheet {
  background: #121212 !important;
  color: #fff !important;
}
.mf-down { color: #6b7280 !important; }
html.dark .mf-down,
[data-theme="dark"] .mf-down,
body.dark .mf-down { color: #aaa !important; }

.mf-art-wrap {
  background: #e8f0fe !important;
  position: relative;
}
html.dark .mf-art-wrap,
[data-theme="dark"] .mf-art-wrap,
body.dark .mf-art-wrap { background: #222 !important; }

.mf-art-wrap.mf-art-empty::after {
  content: '\f001';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 64px;
  color: #2563eb;
  opacity: .85;
}

.mf-artist { color: #6b7280 !important; }
html.dark .mf-artist,
[data-theme="dark"] .mf-artist,
body.dark .mf-artist { color: #9ca3af !important; }

.mf-progress-wrap input[type=range] {
  accent-color: #2563eb !important;
}
.mf-btn.main {
  background: #2563eb !important;
  color: #fff !important;
}
.mf-btn.ghost { color: inherit !important; }
.mf-times { color: #9ca3af !important; }

/* Full modal smooth */
.music-full-modal {
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.music-full-modal.show {
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
}
.music-full-modal .mf-sheet {
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.music-full-modal.show .mf-sheet {
  transform: translateY(0);
}
.music-full-modal.closing {
  opacity: 0;
}
.music-full-modal.closing .mf-sheet {
  transform: translateY(100%);
}

.pm-sel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg, #f5f7fa);
  border-radius: 12px;
}
.pm-sel-item img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
.pm-sel-item .pm-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: #e8f0fe; display: flex; align-items: center; justify-content: center;
  color: #2563eb;
}
.pm-sel-item .pm-play {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; cursor: pointer;
}
.pm-sel-remove {
  border: none; background: transparent; color: #e11d48;
  cursor: pointer; font-size: 16px; padding: 6px;
}
.mm-btn.del {
  background: #fee2e2 !important;
  color: #e11d48 !important;
}

/* Inline progress under playing track in picker */
.mm-item { flex-direction: column; align-items: stretch; gap: 0; }
.mm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.mm-inline-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px 54px;
}
.mm-inline-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.mm-inline-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: #2563eb;
  border-radius: 99px;
  transition: width .1s linear;
}
.mm-inline-time {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}
.mm-btn.saved {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

/* ========== PC music player: o'ng tomon ========== */
@keyframes mfSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mfSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(48px) scale(.94); }
}
@keyframes mmUpMobile {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes mmDownMobile {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* Mobile full: pastga yopilish animatsiya */
.music-full-modal.closing .mf-sheet {
  animation: mmDownMobile .32s ease forwards;
}
.music-full-modal.show .mf-sheet {
  animation: mmUpMobile .32s ease;
}

@media (min-width: 700px) {
  /* Mini player — o'ng past, biroz yuqoriroq */
  .music-player {
    left: auto !important;
    right: 28px !important;
    bottom: 32px !important;
    transform: none !important;
    width: min(380px, calc(100vw - 56px)) !important;
    max-width: 380px !important;
    border-radius: 16px !important;
  }

  /* Full modal — o'ng tomonda */
  .music-full-modal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 24px 28px 32px !important;
    background: rgba(15, 23, 42, 0.35) !important;
  }
  .music-full-modal.show {
    display: flex !important;
  }
  .music-full-modal .mf-sheet {
    width: 400px !important;
    max-width: min(400px, calc(100vw - 56px)) !important;
    min-height: auto !important;
    max-height: calc(100vh - 56px) !important;
    border-radius: 20px !important;
    margin: 0 !important;
    padding: 16px 22px 28px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: mfSlideUp .34s cubic-bezier(.22,.9,.28,1) !important;
  }
  .music-full-modal.closing .mf-sheet {
    animation: mfSlideDown .32s ease forwards !important;
  }
  .mf-art-wrap {
    width: min(280px, 70%) !important;
    margin: 8px 0 18px !important;
  }
  .mf-title { font-size: 18px !important; margin-top: 12px !important; }
  .mf-controls { margin-top: 20px !important; gap: 22px !important; }
  .mf-btn.main { width: 60px !important; height: 60px !important; }
}

/* Light sheet on light theme */
.mf-sheet {
  background: #ffffff !important;
  color: #111 !important;
}
html.dark .mf-sheet,
[data-theme="dark"] .mf-sheet,
body.dark .mf-sheet {
  background: #1a1a1e !important;
  color: #f3f4f6 !important;
}
.mf-title { color: inherit !important; }
.mf-artist { color: #6b7280 !important; }
html.dark .mf-artist,
[data-theme="dark"] .mf-artist,
body.dark .mf-artist { color: #9ca3af !important; }
.mf-btn { color: inherit !important; }
.mf-btn.main {
  background: #2563eb !important;
  color: #fff !important;
}
.mf-progress-wrap input[type=range] {
  accent-color: #2563eb !important;
}

/* ===== FINAL PC fix: mini + full o'ngda, bush joy yo'q ===== */
@media (min-width: 700px) {
  #musicPlayer.music-player,
  .music-player {
    position: fixed !important;
    left: auto !important;
    right: 24px !important;
    bottom: 28px !important;
    transform: none !important;
    width: 340px !important;
    max-width: 340px !important;
    margin: 0 !important;
  }

  #musicFullModal.music-full-modal,
  .music-full-modal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    padding: 20px 24px 28px !important;
  }

  #musicFullModal .mf-sheet,
  .music-full-modal .mf-sheet {
    width: 380px !important;
    max-width: 380px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 48px) !important;
    border-radius: 20px !important;
    padding: 12px 20px 22px !important;
    transform: none !important;
  }

  .music-full-modal.show .mf-sheet {
    animation: mfSlideUp .34s cubic-bezier(.22,.9,.28,1) !important;
    transform: none !important;
  }
  .music-full-modal.closing .mf-sheet {
    animation: mfSlideDown .32s ease forwards !important;
  }

  .music-full-modal .mf-art-wrap {
    width: 220px !important;
    max-width: 220px !important;
    margin: 6px auto 14px !important;
  }
  .music-full-modal .mf-title {
    margin-top: 8px !important;
    font-size: 17px !important;
  }
  .music-full-modal .mf-artist {
    margin-top: 4px !important;
  }
  .music-full-modal .mf-controls {
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    gap: 20px !important;
  }
  .music-full-modal .mf-btn.main {
    width: 56px !important;
    height: 56px !important;
  }
  .music-full-modal .mf-progress-wrap {
    max-width: 100% !important;
  }
}

/* Default Pulse music cover */
.mm-cover, .post-music img, .mp-cover, .mf-art {
  background: linear-gradient(145deg, #1d4ed8, #3b82f6);
}
.pm-ico { display:none !important; }


/* Pulse default covers — no music-note placeholder */
.mf-art-empty,
.mp-cover-empty {
  background: url('/assets/icons/music-pulse-cover.png') center/cover no-repeat !important;
}
.mf-art-empty > i,
.mp-cover-empty > i,
.mp-cover-ico {
  display: none !important;
}
.mf-art-wrap img.mf-art,
.mp-cover-box img.mp-cover {
  object-fit: cover;
}
.mm-cover, .post-music img {
  background: url('/assets/icons/music-pulse-cover-circle.png') center/cover no-repeat;
}