/* LindoPod: a click-wheel music player that floats on the desktop */
.app-window.pod-window, .app-window.pod-window.unfocused {
    min-width: 0; min-height: 0; padding: 0 0 14px; border: 1px solid #a7aeb8; border-radius: 22px;
    flex-direction: column; align-items: center;
    background: linear-gradient(160deg, #ffffff 0%, #eef0f3 45%, #cfd4db 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,0.45), inset 0 1px 0 #fff;
}
.pod-window .title-bar, .pod-window.unfocused .title-bar {
    width: 100%; min-height: 24px; margin: 0; padding: 4px 10px 0 16px;
    background: none; border-radius: 22px 22px 0 0;
}
.pod-window .title-bar-icon { display: none; }
.pod-window .title-bar-text, .pod-window.unfocused .title-bar-text {
    color: #7b8390; text-shadow: none; font: bold 10px Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px;
}
.pod-window .title-btn { width: 15px; height: 15px; background-size: 15px 15px; border-radius: 50%; }
.pod-window.unfocused .title-btn { filter: none; opacity: 0.75; }
.pod-window .resize-handle { display: none; }

.pod-screen {
    width: 180px; height: 136px; margin-top: 2px; padding: 0 6px 5px; display: flex; flex-direction: column;
    border: 3px solid #2b2f36; border-radius: 6px; overflow: hidden; color: #111;
    background: linear-gradient(180deg, #f4f8fc 0%, #d3dfee 100%);
    font: 10px Tahoma, Verdana, Arial, sans-serif;
}
.pod-status {
    display: flex; justify-content: space-between; align-items: center; margin: 0 -6px 5px; padding: 2px 6px;
    font-weight: bold; border-bottom: 1px solid #9fb3cc; background: linear-gradient(180deg, #fbfcfe, #dfe7f1);
}
.pod-battery { width: 18px; height: 8px; border: 1px solid #333; border-radius: 1px; background: linear-gradient(90deg, #45a845 72%, transparent 72%); }
.pod-now { display: flex; gap: 6px; flex: 1; min-height: 0; }
.pod-now[hidden], .pod-list[hidden] { display: none; }
.pod-now img { width: 60px; height: 60px; flex-shrink: 0; object-fit: cover; border: 1px solid #889; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.pod-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pod-meta strong {
    font-size: 11px; line-height: 1.2; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.pod-meta span { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-meta small { color: #666; font-size: 9px; }
.pod-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.pod-list button {
    width: 100%; padding: 3px 4px; border: 0; background: none; text-align: left; cursor: pointer;
    font: 10px Tahoma, Verdana, Arial, sans-serif; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pod-list button.is-current, .pod-list button:hover { background: linear-gradient(180deg, #5d9ce9, #2c6ac8); color: #fff; }
.pod-progress { display: flex; align-items: center; gap: 4px; font-size: 9px; font-variant-numeric: tabular-nums; }
.pod-bar { flex: 1; height: 7px; border: 1px solid #556; border-radius: 3px; background: #fff; overflow: hidden; cursor: pointer; }
#pod-fill { width: 0; height: 100%; background: linear-gradient(180deg, #86b8f2, #2f6fd0); }
.pod-window.show-volume #pod-fill { background: linear-gradient(180deg, #9be27c, #3fa31d); }

.pod-wheel {
    position: relative; width: 150px; height: 150px; margin-top: 14px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e8ebef 60%, #d0d5dc 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.18), 0 1px 0 #fff;
}
.pod-key {
    position: absolute; padding: 6px; border: 0; background: none; cursor: pointer;
    color: #9aa1ab; font: bold 10px Tahoma, Verdana, Arial, sans-serif; letter-spacing: 0.5px;
}
.pod-key svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.pod-key:hover, .pod-key:focus-visible { color: #4b5563; outline: none; }
.pod-menu { top: 8px; left: 50%; transform: translateX(-50%); }
.pod-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.pod-next { right: 8px; top: 50%; transform: translateY(-50%); }
.pod-play { bottom: 6px; left: 50%; transform: translateX(-50%); }
.pod-center {
    position: absolute; inset: 50px; border-radius: 50%; cursor: pointer;
    border: 1px solid #c5cad1; background: radial-gradient(circle at 50% 35%, #fdfdfe, #dfe3e8);
}
.pod-center:active { background: radial-gradient(circle at 50% 40%, #e2e6eb, #cdd2d9); }
.pod-center:focus-visible { outline: 1px dotted #4b5563; outline-offset: 2px; }

@media (max-width: 768px) {
    #pod-window:not(.maximized) {
        min-width: 0 !important; width: 220px !important; height: 364px !important;
        left: calc(50% - 110px) !important; top: 10vh !important;
        padding: 0 0 14px; border: 1px solid #a7aeb8; border-radius: 22px;
    }
    #pod-window .title-bar { border-radius: 22px 22px 0 0; }
}