/* Exousia Podcast Player — Mini Player */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400&display=swap');

#ppp-mini-player {
    --accent:      #2ecc8e;
    --accent-dark: #27ae74;
    --text:        #1a2332;
    --muted:       #7a8fa6;
    --border:      #e2eaf2;
    --bg:          #ffffff;

    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 28px rgba(30,50,80,0.13);
    display: none;
    flex-direction: column;
    z-index: 999999;
    font-family: 'DM Sans', -apple-system, sans-serif;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    user-select: none;
}
#ppp-mini-player.ppp-mini-show { display: flex; transform: translateY(0); }

/* Progress bar */
#ppp-mini-progress-wrap {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--border); cursor: pointer; z-index: 1;
}
#ppp-mini-fill {
    height: 100%; background: var(--accent); width: 0%;
    transition: width .1s linear;
}

/* Main row */
#ppp-mini-main {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px 8px; width: 100%; box-sizing: border-box;
}

/* Artwork */
#ppp-mini-art {
    width: 46px; height: 46px; border-radius: 8px; object-fit: cover;
    background: var(--border); flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(30,50,80,0.10); transition: opacity .15s;
}
#ppp-mini-art[style*="pointer"]:hover { opacity: .82; }

/* Episode info */
#ppp-mini-info  { flex: 1; min-width: 0; }
#ppp-mini-title {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s; line-height: 1.3;
}
#ppp-mini-title[style*="pointer"] { cursor: pointer; }
#ppp-mini-title[style*="pointer"]:hover { color: var(--accent); text-decoration: underline; }
#ppp-mini-show {
    font-size: 11px; color: var(--muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Controls group */
#ppp-mini-controls {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

.ppp-mini-ctrl {
    background: none; border: none; cursor: pointer; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
    transition: color .18s, background .18s; padding: 0;
}
.ppp-mini-ctrl:hover  { color: var(--text); background: var(--border); }
.ppp-mini-ctrl:active { transform: scale(0.92); }

#ppp-mini-play-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0; padding: 0; margin: 0 4px;
    box-shadow: 0 3px 12px rgba(46,204,142,0.35);
    transition: background .2s, transform .15s;
}
#ppp-mini-play-btn:hover  { background: var(--accent-dark); transform: scale(1.07); }
#ppp-mini-play-btn:active { transform: scale(0.93); }

/* Time */
#ppp-mini-time {
    font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted);
    white-space: nowrap; flex-shrink: 0; min-width: 80px; text-align: center;
}

/* Speed button */
#ppp-mini-speed {
    background: none; border: 1px solid var(--border); border-radius: 4px;
    font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer;
    padding: 3px 6px; flex-shrink: 0; transition: color .18s, border-color .18s;
    font-family: 'DM Mono', monospace;
}
#ppp-mini-speed:hover { color: var(--text); border-color: var(--text); }

/* Dismiss */
#ppp-mini-dismiss {
    background: none; border: none; cursor: pointer; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    transition: color .18s, background .18s; padding: 0; margin-left: 4px;
}
#ppp-mini-dismiss:hover { color: var(--text); background: var(--border); }

/* Push page content up */
body.ppp-mini-active { padding-bottom: 72px !important; }

/* Tablet — hide time, keep all controls */
@media (max-width: 900px) { #ppp-mini-time { display: none; } }

/* Mobile — two-row layout */
@media (max-width: 600px) {
    #ppp-mini-main { flex-wrap: wrap; padding: 8px 14px 4px; gap: 8px; }
    #ppp-mini-art   { width: 38px; height: 38px; }
    #ppp-mini-info  { flex: 1; min-width: 0; order: 1; }
    #ppp-mini-dismiss { order: 2; }
    #ppp-mini-controls {
        order: 3; width: 100%; justify-content: center;
        gap: 6px; padding-bottom: 6px;
    }
    #ppp-mini-time  { display: none; }
    #ppp-mini-speed { display: none; }
    body.ppp-mini-active { padding-bottom: 110px !important; }
}