.queue-panel { position: fixed; right: 20px; bottom: 100px; z-index: 4200; width: min(420px, calc(100vw - 40px)); max-height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; border: 1px solid #ffffff18; border-radius: 20px; background: #1b1b1f; color: #fff; box-shadow: 0 20px 60px #0008; overflow: hidden; }
.queue-panel[hidden] { display: none; }
.queue-panel header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #ffffff12; }
.queue-panel h2 { margin: 0; font-size: 19px; }
#queue-count { color: #a7a7b0; font-size: 13px; }
#queue-close { margin-left: auto; }
.queue-list { overflow-y: auto; overscroll-behavior: contain; padding: 8px; min-height: 0; }
.queue-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 12px; border: 0; border-radius: 12px; text-align: left; background: transparent; color: inherit; font: inherit; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 64px; }
.queue-row:hover { background: #ffffff08; }
.queue-row[aria-current] { color: #c084fc; background: #a855f71c; }
.queue-row:disabled { opacity: .4; cursor: default; }
.queue-number { min-width: 26px; color: #a7a7b0; font-size: 12px; }
.queue-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.queue-cover { flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: #303034; }
.queue-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
#btn-queue svg { width: 19px; height: 19px; }
.queue-copy strong, .queue-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-copy strong { font-size: 14px; font-weight: 600; }
.queue-copy > span { font-size: 12px; color: #a7a7b0; }
#queue-empty { padding: 20px; color: #a7a7b0; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) { .queue-panel { display: none; } }