/* ==========================================================
   FILE EMBEDS — uploaded zip/docs cards + audio/video player box
   (system/actions/chat_post.php builds the cards, js/file_embeds.js runs the player)
========================================================== */
.embed-file {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 320px; box-sizing: border-box;
    margin: 4px 0; padding: 10px 12px;
    background: linear-gradient(135deg, rgba(184,150,79,.18), rgba(27,27,27,.55));
    border: 1px solid rgba(163,163,163,.22); border-radius: 14px;
    color: #e5e5e5; text-decoration: none !important; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.embed-file:hover { border-color: #d4b26a; transform: translateY(-1px); background: linear-gradient(135deg, rgba(184,150,79,.28), rgba(27,27,27,.6)); }
.embed-file:focus-visible { outline: 2px solid #d4b26a; outline-offset: 2px; }
.embed-file .ef-icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; font-size: 20px; color: #fff;
    background: linear-gradient(135deg, #b8964f, #b8964f);
}
.embed-file--audio .ef-icon { background: linear-gradient(135deg, #ec4899, #b8964f); }
.embed-file--video .ef-icon { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.embed-file--file  .ef-icon { background: linear-gradient(135deg, #0ea5e9, #b8964f); }
.embed-file .ef-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.embed-file .ef-name { font-size: 14px; font-weight: 700; color: #f5f5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-file .ef-sub  { font-size: 12px; color: #a3a3a3; }
.embed-file .ef-sub b { color: #e6cf98; font-weight: 700; letter-spacing: .3px; }
.embed-file .ef-act {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; color: #fff; background: rgba(255,255,255,.1);
}
.embed-file:hover .ef-act { background: #b8964f; }

/* ── Player box ── */
.ipl { position: fixed; inset: 0; z-index: 10060; display: none; align-items: center; justify-content: center; padding: 16px; }
.ipl.ipl-open { display: flex; animation: iplIn .16s ease; }
@keyframes iplIn { from { opacity: 0; } to { opacity: 1; } }
.ipl-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.78); backdrop-filter: blur(4px); }
.ipl-card {
    position: relative; width: 100%; max-width: 380px; box-sizing: border-box;
    padding: 16px 18px 18px; border-radius: 22px; color: #e5e5e5;
    background: linear-gradient(160deg, #202020 0%, #1b1b1b 60%, #131313 100%);
    border: 1px solid rgba(212,178,106,.28); box-shadow: 0 24px 70px rgba(0,0,0,.65);
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ipl-video .ipl-card { max-width: 720px; }
.ipl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ipl-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg,#b8964f,#b8964f); }
.ipl-title { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #f5f5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipl-btn {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-grid; place-items: center; font-size: 14px; color: #d4d4d4; background: rgba(255,255,255,.07);
    text-decoration: none; transition: background .12s ease, color .12s ease;
}
.ipl-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.ipl-max { display: none; }
.ipl-video .ipl-min { display: none; }   /* video can't play from a minimised bar */

.ipl-stage { display: grid; place-items: center; min-height: 150px; margin-bottom: 8px; }
.ipl-video .ipl-disc, .ipl-video .ipl-eq { display: none; }
.ipl-audio .ipl-screen { display: none; }
.ipl-disc {
    width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; color: #fff;
    background: radial-gradient(circle at 30% 25%, #e6cf98, #b8964f 45%, #3a3a3a 100%);
    box-shadow: 0 10px 34px rgba(184,150,79,.45), inset 0 0 0 6px rgba(255,255,255,.06);
}
.ipl-playing .ipl-disc { animation: iplSpin 6s linear infinite; }
@keyframes iplSpin { to { transform: rotate(360deg); } }
.ipl-eq { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-top: 14px; }
.ipl-eq i { width: 4px; height: 6px; border-radius: 2px; background: #e6cf98; opacity: .5; }
.ipl-playing .ipl-eq i { opacity: 1; animation: iplBar .9s ease-in-out infinite; }
.ipl-eq i:nth-child(2) { animation-delay: .15s; } .ipl-eq i:nth-child(3) { animation-delay: .3s; }
.ipl-eq i:nth-child(4) { animation-delay: .45s; } .ipl-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes iplBar { 0%,100% { height: 5px; } 50% { height: 22px; } }
.ipl-screen { width: 100%; }
.ipl-screen video { display: block; width: 100%; max-height: 62vh; border-radius: 14px; background: #000; }

.ipl-seekrow { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a3a3a3; font-variant-numeric: tabular-nums; }
.ipl-seek, .ipl-volume { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px; outline: none; cursor: pointer; }
.ipl-seek { flex: 1 1 auto; --p: 0%; background: linear-gradient(90deg, #d4b26a var(--p), rgba(255,255,255,.14) var(--p)); }
.ipl-volume { width: 70px; background: rgba(255,255,255,.18); }
.ipl-seek::-webkit-slider-thumb, .ipl-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ipl-seek::-moz-range-thumb, .ipl-volume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.ipl-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ipl-play { width: 52px; height: 52px; font-size: 20px; color: #fff; background: linear-gradient(135deg, #b8964f, #b8964f); box-shadow: 0 6px 18px rgba(184,150,79,.5); }
.ipl-play:hover { background: linear-gradient(135deg, #7c7ff5, #d4b26a); }
.ipl-vol { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }

/* ── Minimised bar (music keeps playing while chatting) ── */
.ipl.ipl-mini { inset: auto 12px 12px auto; padding: 0; width: auto; pointer-events: none; }
.ipl.ipl-mini .ipl-backdrop { display: none; }
.ipl.ipl-mini .ipl-card { pointer-events: auto; width: min(320px, calc(100vw - 24px)); max-width: none; padding: 8px 10px; border-radius: 16px; }
.ipl.ipl-mini .ipl-stage, .ipl.ipl-mini .ipl-seekrow, .ipl.ipl-mini .ipl-vol, .ipl.ipl-mini .ipl-dl,
.ipl.ipl-mini .ipl-back, .ipl.ipl-mini .ipl-fwd, .ipl.ipl-mini .ipl-min { display: none; }
.ipl.ipl-mini .ipl-max { display: inline-grid; }
.ipl.ipl-mini .ipl-head { margin: 0; }
.ipl.ipl-mini .ipl-ctrl { margin: 0; display: contents; }
.ipl.ipl-mini .ipl-play { width: 34px; height: 34px; font-size: 14px; order: 5; box-shadow: none; }
.ipl.ipl-mini .ipl-card { display: flex; align-items: center; gap: 8px; }
.ipl.ipl-mini .ipl-head { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) { .ipl-card { max-width: 100%; } }