/* Music discovery and search surfaces. */

/* Search surface: compact tabs and history layout inspired by native music apps. */
.music-search-screen { min-height: 100%; padding: 8px 14px 34px; overflow-y: auto; scrollbar-width: none; background: var(--music-bg, var(--qixi-bg, #f4f8fb)); }
.music-search-screen::-webkit-scrollbar { display: none; }
.music-search-header { display: grid; grid-template-columns: 31px minmax(0, 1fr) 31px; align-items: center; gap: 8px; padding: 4px 0 14px; }
.music-search-back, .music-search-filter { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--music-border); border-radius: 11px; color: var(--music-muted); background: var(--music-soft); }
.music-search-back:hover, .music-search-filter:hover { color: var(--music-text); background: var(--music-row-active); }
.music-search-back svg, .music-search-filter svg { width: 15px; height: 15px; }
.music-search-page-form { display: grid; grid-template-columns: 16px minmax(0, 1fr) 25px 25px; align-items: center; gap: 7px; min-height: 38px; padding: 5px 6px 5px 11px; border: 1px solid var(--music-border); border-radius: 19px; background: var(--music-surface); box-shadow: 0 7px 16px color-mix(in srgb, var(--music-accent-strong) 8%, transparent); }
.music-search-page-form > svg { width: 15px; height: 15px; color: var(--music-muted); }
.music-search-page-form input { min-width: 0; border: 0; outline: 0; color: var(--music-text); background: transparent; font-size: 11px; }
.music-search-page-form input::placeholder { color: var(--music-muted); }
.music-search-page-form button { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--music-muted); background: transparent; }
.music-search-page-form button:hover { color: var(--music-text); background: var(--music-row-active); }
.music-search-page-form button[type="submit"] { color: var(--music-accent-ink); background: var(--music-accent); }
.music-search-page-form button[type="submit"]:hover { color: var(--music-accent-ink); background: var(--music-accent); filter: brightness(1.04); }
.music-search-page-form button svg { width: 13px; height: 13px; }
.music-search-categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px 0 16px; border-bottom: 1px solid var(--music-border); }
.music-search-categories button { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 5px 2px; color: var(--music-muted); background: transparent; font-size: 9px; }
.music-search-categories button svg { width: 18px; height: 18px; stroke-width: 1.7; }
.music-search-categories button.is-active { color: var(--music-accent-strong); }
.music-search-categories button.is-active svg { color: var(--music-accent-strong); }
.music-search-history, .music-search-results-section { margin-top: 17px; }
.music-search-page-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 10px; }
.music-search-page-heading h3 { margin: 4px 0 0; color: var(--music-text); font-size: 16px; }
.music-search-page-heading button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--music-border); border-radius: 9px; color: var(--music-muted); background: var(--music-soft); }
.music-search-page-heading button:hover { color: var(--music-text); background: var(--music-row-active); }
.music-search-page-heading button svg { width: 14px; height: 14px; }
.music-search-history-list { display: flex; flex-wrap: wrap; gap: 7px; }
.music-search-history-list button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--music-border); border-radius: 999px; color: var(--music-text); background: var(--music-surface); font-size: 10px; }
.music-search-history-list button:hover { border-color: var(--music-accent); background: var(--music-row-active); }
.music-search-history-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-search-history-list button svg { width: 12px; height: 12px; color: var(--music-muted); }
.music-search-history-empty { margin: 24px 0 8px; color: var(--music-muted); font-size: 10px; text-align: center; }
.music-search-results-section[hidden], .music-search-history-empty[hidden] { display: none; }
.music-search-page-results { display: grid; gap: 3px; }
.music-search-result-row { display: grid; grid-template-columns: 22px 43px minmax(0, 1fr) 22px; align-items: center; gap: 9px; width: 100%; min-height: 62px; padding: 7px; border: 1px solid transparent; border-radius: 14px; color: var(--music-text); background: transparent; text-align: left; }
.music-search-result-row:hover { border-color: var(--music-border); background: var(--music-row-active); }
.music-search-result-index { color: var(--music-muted); font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.music-search-result-art { position: relative; width: 43px; height: 43px; overflow: hidden; border-radius: 12px; background: var(--music-soft); }
.music-search-result-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-search-result-art i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--music-accent-ink); background: color-mix(in srgb, var(--music-accent) 86%, transparent); opacity: 0; }
.music-search-result-row:hover .music-search-result-art i { opacity: .92; }
.music-search-result-art svg { width: 15px; height: 15px; fill: currentColor; }
.music-search-result-copy { min-width: 0; display: grid; gap: 4px; }
.music-search-result-copy strong, .music-search-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-search-result-copy strong { font-size: 11px; }
.music-search-result-copy small { color: var(--music-muted); font-size: 9px; }
.music-search-result-more { display: grid; place-items: center; color: var(--music-muted); }
.music-search-result-more svg { width: 16px; height: 16px; }
.music-search-screen .music-inline-loading { min-height: 90px; margin: 0; border: 1px dashed var(--music-border); border-radius: 14px; }
.music-view #music-refresh-catalog.is-loading { cursor: wait; }
@media (max-width: 360px) {
  .music-search-header { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 6px; }
  .music-search-back, .music-search-filter { width: 28px; height: 28px; }
  .music-search-result-row { grid-template-columns: 18px 39px minmax(0, 1fr) 18px; gap: 7px; min-height: 58px; }
  .music-search-result-art { width: 39px; height: 39px; border-radius: 10px; }
}