/* Цвета берём из темы Telegram — приложение само подстроится под светлую и тёмную. */
:root {
  --bg:        var(--tg-theme-bg-color, #ffffff);
  --bg-soft:   var(--tg-theme-secondary-bg-color, #f2f2f7);
  --text:      var(--tg-theme-text-color, #000000);
  --hint:      var(--tg-theme-hint-color, #8e8e93);
  --accent:    var(--tg-theme-button-color, #2481cc);
  --on-accent: var(--tg-theme-button-text-color, #ffffff);
  --line:      color-mix(in srgb, var(--hint) 22%, transparent);
  --player-h:  84px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
}

/* ------------------------------ вкладки ------------------------------ */
.tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.tab {
  flex: 1; padding: 9px 4px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--hint);
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s, color .15s;
}
.tab.is-active { background: var(--bg-soft); color: var(--text); }

/* ------------------------------- поиск ------------------------------- */
.search-row { position: relative; padding: 10px 12px 4px; }
#q {
  width: 100%; padding: 11px 38px 11px 14px;
  border: 0; border-radius: 11px;
  background: var(--bg-soft); color: var(--text);
  font: inherit; outline: none;
}
#q::placeholder { color: var(--hint); }
.clear {
  position: absolute; right: 20px; top: 50%; transform: translateY(-30%);
  border: 0; background: none; color: var(--hint);
  font-size: 15px; cursor: pointer; padding: 6px;
}

/* ------------------------------ список ------------------------------- */
.list { padding: 6px 0 12px; }

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
.row:active { background: var(--bg-soft); }
.row.is-playing .row-title { color: var(--accent); }

.cover {
  width: 48px; height: 48px; flex: none;
  border-radius: 8px; object-fit: cover;
  background: var(--bg-soft);
}

.row-meta { flex: 1; min-width: 0; }
.row-title {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  color: var(--hint); font-size: 13px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 44px — минимальная цель для пальца по рекомендациям Apple. */
.act {
  flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--bg-soft); color: var(--accent);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.act[data-state="saved"] { color: var(--hint); }
.act[data-state="busy"]  { color: var(--hint); font-size: 12px; font-weight: 600; }

/* ------------------------------ пустое ------------------------------- */
.empty {
  padding: 48px 32px; text-align: center;
  color: var(--hint); font-size: 14px; line-height: 1.5;
}

/* ------------------------------ плеер -------------------------------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bar { position: relative; height: 3px; background: var(--line); cursor: pointer; }
/* Сама полоска тонкая, но нажимать можно по широкой зоне вокруг неё. */
.bar::before { content: ''; position: absolute; inset: -11px 0; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }

.player-body { display: flex; align-items: center; gap: 12px; padding: 10px 12px 2px; }
.p-cover { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; background: var(--bg-soft); flex: none; }
.p-meta { flex: 1; min-width: 0; }
.p-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-artist { color: var(--hint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-controls { display: flex; align-items: center; gap: 4px; flex: none; }
.ctl {
  border: 0; background: none; color: var(--text);
  font-size: 17px; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
}
.ctl-main { background: var(--accent); color: var(--on-accent); font-size: 15px; }

.p-time {
  display: flex; justify-content: space-between;
  padding: 0 14px 8px; color: var(--hint);
  font-size: 11px; font-variant-numeric: tabular-nums;
}

.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }