/* ────────────────────────────────────────────────────────────────────
   M2 Audio Player v2
   Companion to audio-player-v2.js. Self-contained CSS — no theme deps
   beyond a couple of CSS variables that fall back to good defaults.
   ──────────────────────────────────────────────────────────────────── */

.sf-audio-item--m2ap > audio {
    /* Hide the native player; the JS reaches in for state. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.m2ap {
    --m2ap-bg:        var(--m2-audio-bg, rgba(255, 255, 255, 0.92));
    --m2ap-border:    var(--m2-audio-border, rgba(27, 21, 49, 0.08));
    --m2ap-text:      var(--m2-audio-text, #1b1531);
    --m2ap-muted:     var(--m2-audio-muted, #7a6f8f);
    --m2ap-accent:    var(--m2-audio-accent, #8b5cf6);
    --m2ap-accent-dim:var(--m2-audio-accent-dim, rgba(139, 92, 246, 0.18));
    --m2ap-played:    var(--m2-audio-played, #8b5cf6);
    --m2ap-unplayed:  var(--m2-audio-unplayed, rgba(27, 21, 49, 0.22));
    --m2ap-hover:     var(--m2-audio-hover, #c4b5fd);

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--m2ap-bg);
    border: 1px solid var(--m2ap-border);
    border-radius: 14px;
    font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    color: var(--m2ap-text);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.m2ap-play {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--m2ap-accent);
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.28);
}
.m2ap-play:hover { transform: scale(1.04); filter: brightness(1.05); }
.m2ap-play:active { transform: scale(0.96); }
.m2ap-play:focus-visible { outline: 2px solid var(--m2ap-accent); outline-offset: 2px; }
.m2ap-play svg { display: block; }

.m2ap-wave {
    flex: 1 1 auto;
    position: relative;
    height: 36px;
    min-width: 80px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.m2ap-wave canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.m2ap-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    background: #1b1531;
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.m2ap-tooltip[hidden] { display: none; }

.m2ap-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--m2ap-muted);
    font-size: 11px;
}
.m2ap-meta .m2ap-time { color: var(--m2ap-text); font-weight: 600; }
.m2ap-meta .m2ap-sep  { opacity: 0.4; }

.m2ap-speed {
    flex: 0 0 auto;
    background: var(--m2ap-accent-dim);
    color: var(--m2ap-accent);
    border: 0;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s ease;
}
.m2ap-speed:hover { background: rgba(139, 92, 246, 0.28); }

.m2ap-vol {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--m2ap-muted);
    border-radius: 6px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.15s ease, background 0.15s ease;
}
.m2ap-vol:hover { color: var(--m2ap-text); background: rgba(27, 21, 49, 0.04); }
.m2ap-vol svg { display: block; }

.m2ap-vol-drawer {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid var(--m2ap-border);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 8px 20px -8px rgba(15, 10, 30, 0.2);
    z-index: 100;
    min-width: 140px;
}
.m2ap-vol-drawer[hidden] { display: none; }
.m2ap-vol-drawer input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--m2ap-accent);
}

.m2ap-dl {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--m2ap-muted);
    border-radius: 6px;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.m2ap-dl:hover { color: var(--m2ap-text); background: rgba(27, 21, 49, 0.04); }
.m2ap-dl svg { display: block; }

/* Mobile compaction: hide download + speed becomes smaller, but keep
   volume drawer accessible (the v1 player hid it entirely on mobile). */
@media (max-width: 480px) {
    .m2ap { gap: 8px; padding: 6px 10px; font-size: 11px; }
    .m2ap-play { width: 32px; height: 32px; }
    .m2ap-wave { height: 32px; }
    .m2ap-dl { display: none; }
    .m2ap-speed { padding: 3px 6px; font-size: 9px; }
}

/* Dark backgrounds (e.g. inside the chat bubble for own messages). */
.m2ap--dark {
    --m2ap-bg: rgba(15, 10, 30, 0.85);
    --m2ap-text: #ffffff;
    --m2ap-muted: rgba(255, 255, 255, 0.6);
    --m2ap-border: rgba(255, 255, 255, 0.12);
    --m2ap-unplayed: rgba(255, 255, 255, 0.25);
}