#ofm-queue-drawer { position: fixed; z-index: 1000000; right: 18px; bottom: calc(var(--player-height, 118px) + 16px); width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - var(--player-height, 118px) - 42px)); display: flex; flex-direction: column; overflow: hidden; color: var(--ofm-text, #fff); background: #1b1b1b; border: 1px solid var(--ofm-border, #303030); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-lg, 0 20px 45px rgb(0 0 0 / .45)); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
#ofm-queue-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ofm-queue__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--ofm-border, #303030); }
.ofm-queue__header h2 { margin: 0; font-size: 1rem; }
.ofm-queue__count { margin: 4px 0 0; color: var(--ofm-muted, #9b9b9b); font-size: .8rem; }
.ofm-queue__close { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--ofm-text, #fff); background: transparent; cursor: pointer; font-size: 1.4rem; line-height: 1; }
.ofm-queue__close:hover, .ofm-queue__close:focus-visible { background: rgb(255 255 255 / .1); }
.ofm-queue__list { margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.ofm-queue__item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; width: 100%; padding: 9px; border: 0; border-radius: 10px; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.ofm-queue__item:hover, .ofm-queue__item:focus-visible { background: rgb(255 255 255 / .08); outline: none; }
.ofm-queue__item.is-current { background: rgb(244 196 48 / .12); }
.ofm-queue__cover { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; background: #292929; }
.ofm-queue__title, .ofm-queue__artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofm-queue__title { font-size: .88rem; }
.ofm-queue__item.is-current .ofm-queue__title { color: var(--ofm-primary, #f4c430); }
.ofm-queue__artist { margin-top: 3px; color: var(--ofm-muted, #9b9b9b); font-size: .78rem; }
.ofm-queue__empty { padding: 30px 18px; color: var(--ofm-muted, #9b9b9b); text-align: center; }
@media (max-width: 580px) { #ofm-queue-drawer { right: 10px; bottom: calc(154px + env(safe-area-inset-bottom) + 10px); width: calc(100vw - 20px); } }