/* =========================================================
   Shrang Recent Clips
   File belongs to:
   Plugin: sharang-music-generator
   Path: assets/css/recent-clips.css

   Purpose:
   Safe Recent-Clips-only mobile refinement.
   Do not use this file for Result Page, My Clips, Account,
   Clip Studio, or global layout.
   ========================================================= */

.sharang-recent-clips {
    margin-top: -6px;
}

/* Give the Recent Clips page a more creative app-like surface. */
.sharang-recent-clips > p {
    max-width: 760px;
    color: #3e3733;
    font-size: 15px;
    line-height: 1.6;
}

/* Keep clip cards colorful but controlled. */
.sharang-recent-card {
    border-color: rgba(240, 216, 206, 0.92);
    border-radius: 22px;
    box-shadow:
        0 14px 30px rgba(17, 17, 17, 0.055),
        0 0 0 1px rgba(255, 255, 255, 0.52) inset;
}

.sharang-recent-song-card {
    border-color: rgba(250, 84, 32, 0.26) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(250, 84, 32, 0.18), transparent 42%),
        radial-gradient(circle at 96% 18%, rgba(124, 58, 237, 0.08), transparent 34%),
        linear-gradient(180deg, #fff2ec 0%, #fff8f5 52%, #fffdfb 100%) !important;
}

.sharang-recent-bed-music-card {
    border-color: rgba(20, 184, 166, 0.28) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(20, 184, 166, 0.16), transparent 42%),
        radial-gradient(circle at 96% 18%, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #eafff7 0%, #f4fff9 52%, #fbfffd 100%) !important;
}

/* Poster area: keep it strong but slightly less tall on mobile. */
.sharang-recent-visual {
    border-radius: 19px;
    box-shadow:
        0 12px 24px rgba(17, 17, 17, 0.11),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.sharang-recent-visual-placeholder {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.40), transparent 25%),
        radial-gradient(circle at 86% 18%, rgba(124, 58, 237, 0.23), transparent 28%),
        radial-gradient(circle at 58% 58%, rgba(37, 99, 235, 0.11), transparent 34%),
        linear-gradient(145deg, #ffb083 0%, #fa5420 44%, #7c3aed 78%, #171312 100%);
}

.sharang-recent-visual-bed-music.sharang-recent-visual-placeholder {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.32), transparent 25%),
        radial-gradient(circle at 86% 18%, rgba(37, 99, 235, 0.18), transparent 28%),
        radial-gradient(circle at 58% 58%, rgba(124, 58, 237, 0.10), transparent 34%),
        linear-gradient(145deg, #34dca7 0%, #059669 47%, #2563eb 78%, #121414 100%);
}

.sharang-recent-visual-type {
    min-height: 23px;
    padding: 5px 10px;
    font-size: 10.5px;
}

.sharang-recent-visual-text {
    padding-bottom: 18px;
}

.sharang-recent-visual-text strong {
    text-wrap: balance;
}

/* Text/meta area should be compact and readable. */
.sharang-recent-meta {
    margin-bottom: 8px;
    color: #2d2825;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.45;
}

.sharang-recent-card audio {
    margin-top: auto;
    margin-bottom: 9px;
}

/* Make Recent Clips action buttons compact and app-like. */
.sharang-recent-share-actions {
    gap: 7px;
}

.sharang-recent-share-actions .sharang-secondary-link {
    min-height: 34px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
}

.sharang-recent-download-action {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.sharang-recent-download-action:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.sharang-recent-primary-action,
.sharang-recent-reel-open-action {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

.sharang-recent-primary-action:hover,
.sharang-recent-reel-open-action:hover {
    background: #5b21b6 !important;
    border-color: #5b21b6 !important;
    color: #ffffff !important;
}

.sharang-recent-reel-download-action {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

.sharang-recent-reel-download-action:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.sharang-recent-share-actions .sharang-copy-share-link {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #111111 !important;
    border-color: rgba(17, 17, 17, 0.14) !important;
}

/* Report should stay visible but not visually dominant. */
.sharang-report-clip-box {
    margin-top: 6px;
}

.sharang-report-clip-box summary {
    color: #6f6862;
    font-size: 10.5px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {
    .sharang-recent-clips {
        margin-top: -10px;
    }

    .sharang-recent-card {
        padding: 12px;
        border-radius: 18px;
    }

    .sharang-recent-visual {
        min-height: 185px;
        margin-bottom: 9px;
        border-radius: 17px;
    }

    .sharang-recent-visual-overlay {
        padding: 13px;
    }

    .sharang-recent-visual-text {
        padding-bottom: 13px;
    }

    .sharang-recent-visual-text strong {
        font-size: 16.5px;
        line-height: 1.38;
    }

    .sharang-recent-meta {
        margin-bottom: 7px;
        font-size: 12px;
        line-height: 1.42;
    }

    .sharang-recent-card audio {
        margin-top: 7px;
        margin-bottom: 8px;
    }

    .sharang-recent-share-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .sharang-recent-share-actions .sharang-secondary-link,
    .sharang-recent-share-actions button {
        width: 100%;
        min-height: 34px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
        justify-content: center;
        text-align: center;
    }

    .sharang-report-clip-box summary {
        font-size: 10.5px;
    }
}

@media (max-width: 420px) {
    .sharang-recent-visual {
        min-height: 170px;
    }
}