/* Shared compact navigation for the Mini App and browser library. */
:root { --mini-safe-top: 0px; --mini-safe-bottom: 0px; --mini-button-text: #fff; --mini-nav-height: 72px; }
.mini-shell { padding-bottom: calc(var(--mini-nav-height) + max(env(safe-area-inset-bottom), var(--mini-safe-bottom)) + 24px); }
.mini-shell.has-player { padding-bottom: calc(var(--mini-nav-height) + 190px + max(env(safe-area-inset-bottom), var(--mini-safe-bottom))); }
.mini-shell .player { bottom: calc(var(--mini-nav-height) + max(env(safe-area-inset-bottom), var(--mini-safe-bottom))); }
.mini-nav { position: fixed; z-index: 50; inset: auto 0 0; height: calc(var(--mini-nav-height) + max(env(safe-area-inset-bottom), var(--mini-safe-bottom))); padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom), var(--mini-safe-bottom)); display: flex; justify-content: center; background: var(--color-night); border-top: 1px solid var(--color-border); }
.mini-nav-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; max-width: 180px; border: 0; border-radius: 12px; background: transparent; color: var(--color-muted); padding: 6px 4px; font-size: 12px; cursor: pointer; }
.mini-nav-button[aria-current="page"] { color: var(--color-ink); background: var(--color-soft); }
.mini-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mini-nav button:focus-visible, .mini-section button:focus-visible, .mini-dialog button:focus-visible { outline: 2px solid var(--color-magenta); outline-offset: 3px; }
.mini-section { width: 100%; min-width: 0; max-width: 880px; min-height: 55vh; padding: 28px 0; margin: 0 auto; }
.mini-section h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 38px); letter-spacing: -0.025em; line-height: 1.2; }
.mini-note { color: var(--color-muted); font-size: 14px; line-height: 1.55; max-width: 62ch; }
.mini-tabs, .mini-actions, .mini-pager, .mini-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.mini-tabs button { background: transparent; color: var(--color-muted); border-color: var(--color-border); }
.mini-tabs button[aria-pressed="true"] { background: var(--color-soft); color: var(--color-ink); }
.mini-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.mini-track-copy { display: flex; flex-direction: column; min-width: 0; }
.mini-track-copy strong { font-size: 16px; overflow-wrap: anywhere; }
.mini-track-copy span, .mini-track-copy small { color: var(--color-muted); font-size: 14px; overflow-wrap: anywhere; }
.mini-track .mini-actions { margin: 0; gap: 10px; }
.mini-track .text-button { min-height: 44px; }
.mini-add-button { min-width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--color-border); background: transparent; color: var(--color-ink); font-size: 22px; cursor: pointer; }
.mini-add-button:hover { background: var(--color-soft); }
.mini-playlists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.mini-playlist { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 90px; padding: 20px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-night); text-align: left; font-size: 18px; overflow-wrap: anywhere; cursor: pointer; }
.mini-playlist small { color: var(--color-muted); flex-shrink: 0; }
.mini-settings { display: grid; gap: 18px; max-width: 540px; margin-top: 30px; }
.mini-field { display: grid; gap: 8px; font-weight: 600; }
.mini-field select, .mini-dialog input, .mini-filter input { color: var(--color-ink); background: var(--color-night); border: 1px solid var(--color-border); border-radius: 10px; min-height: 48px; padding: 10px 12px; font-size: 16px; width: 100%; min-width: 0; }
.mini-filter input { flex: 1; min-width: 160px; }
.mini-settings .primary-button { justify-self: start; }
.mini-settings .mini-note { margin: -8px 0 0; }
.mini-pager { justify-content: space-between; }
.mini-dialog { background: var(--color-night); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: 18px; width: min(440px, calc(100vw - 32px)); padding: 24px; max-height: 80vh; }
.mini-dialog::backdrop { background: #0009; }
.mini-dialog h2 { font-size: 22px; margin-top: 0; }
.mini-dialog-content { display: grid; gap: 10px; }
.mini-dialog form { display: grid; gap: 14px; }
.mini-dialog > .text-button { margin-top: 16px; min-height: 44px; }
.mini-deliveries { max-width: 880px; margin: 24px auto; border-top: 1px solid var(--color-border); padding: 20px 0; }
.mini-deliveries h2 { font-size: 20px; }
.mini-command { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.mini-command strong { flex: 1 1 230px; font-size: 14px; }
.mini-command p { flex-basis: 100%; margin: 0; }
.mini-command progress { max-width: 130px; height: 8px; accent-color: var(--color-magenta); }
.mini-shell .track-actions-with-favorite { grid-template-columns: 1fr auto auto auto; }
.mini-shell .track-actions .mini-add-button { min-width: 36px; width: 36px; height: 36px; }
.mini-shell .track-actions .card-download span { display: none; }
.mini-shell .track-actions .card-listen span { font-size: 12px; }
.mini-preview-label { color: var(--color-muted); font-size: 11px; }
.mini-shell #toast { bottom: calc(var(--mini-nav-height) + 24px + max(env(safe-area-inset-bottom), var(--mini-safe-bottom))); z-index: 70; }
body[data-mini-view="library"] main > section:not(#mini-section):not(#mini-deliveries),
body[data-mini-view="history"] main > section:not(#mini-section):not(#mini-deliveries),
body[data-mini-view="settings"] main > section:not(#mini-section):not(#mini-deliveries) { display: none !important; }
body[data-mini-view="library"] footer, body[data-mini-view="history"] footer, body[data-mini-view="settings"] footer { display: none; }
.in-telegram .topbar { padding-top: max(12px, var(--mini-safe-top)); }
.in-telegram #topbar-login, .in-telegram #topbar-signup, .in-telegram footer { display: none; }
.in-telegram .primary-button { color: var(--mini-button-text); }
@media (max-width: 640px) {
  .mini-section { padding-top: 20px; }
  .mini-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .mini-tabs button { white-space: nowrap; padding: 9px 12px; font-size: 13px; }
  .mini-shell .album-row-actions { flex-wrap: wrap; justify-content: flex-end; }
  .mini-shell .album-row-actions .mini-add-button { min-width: 36px; width: 36px; height: 36px; }
  .mini-shell .player { bottom: calc(var(--mini-nav-height) + max(env(safe-area-inset-bottom), var(--mini-safe-bottom))); }
}
@media (prefers-reduced-motion: reduce) { .mini-shell *, .mini-shell *::before, .mini-shell *::after { scroll-behavior: auto !important; } }

.mini-track .favorite-button { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border); border-radius: 10px; }
.mini-track .favorite-button svg { width: 21px; height: 21px; }