/* Explain: Styles for the floating audio player, including mobile layout adjustments. */
/* ---------- المشغل الصوتي العائم ---------- */
.ap-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info close"
        "controls controls"
        "progress progress";
    align-items: center;
    gap: 0.55rem 0.7rem;
    padding-block: 0.7rem;
}

.ap-info {
    grid-area: info;
    min-width: 0;
}

.ap-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-artist {
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-close { grid-area: close; }

/* صف واحد لأزرار التشغيل والتنقل */
.ap-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

/* شريط التقدّم بعرض كامل */
.ap-progress {
    grid-area: progress;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.ap-seek {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-time {
    flex-shrink: 0;
    width: 2.75rem;
    text-align: center;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.ap-volume { display: none; }

/* ---------- سطح المكتب: المشغل في صف واحد ---------- */
@media (min-width: 768px) {
    .ap-inner {
        grid-template-columns: minmax(0, 220px) auto minmax(0, 1fr) auto auto;
        grid-template-areas: "info controls progress volume close";
        gap: 0.85rem;
        padding-block: 0.8rem;
    }

    .ap-controls {
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .ap-volume {
        grid-area: volume;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ap-vol-range {
        width: 6rem;
        flex-shrink: 0;
    }
}

/* ---------- الجوال: ارفع الأزرار العائمة فوق المشغل حتى لا تغطّيها ---------- */
@media (max-width: 767px) {
    body.player-active { padding-bottom: 10rem; }

    body.player-active .float-wa,
    body.player-active .float-top,
    body.player-active .chat-widget { bottom: 10.5rem; }
}