/* ============================================================
   SKN Audio News Player — Front-End Styles
   ============================================================ */

/* ── CSS Custom Properties (design tokens) ── */
.skn-audio-player {
    /* Evoke theme (default) — Black, White, Crimson Red, Light Grey */
    --skn-bg:             #f4f4f4;   /* light grey base */
    --skn-border:         #d8d8d8;
    --skn-header-bg:      #0d0d0d;   /* near black */
    --skn-header-fg:      #ffffff;
    --skn-accent:         #DC143C;   /* crimson red */
    --skn-accent-hover:   #b01030;
    --skn-item-hover:     #ececec;
    --skn-playing-bg:     #fde8ec;   /* light crimson tint */
    --skn-text-primary:   #0d0d0d;
    --skn-text-muted:     #757575;
    --skn-badge-bg:       #0d0d0d;
    --skn-badge-fg:       #ffffff;
    --skn-np-bg:          #1a1a1a;   /* dark charcoal */
    --skn-np-fg:          #ffffff;
    --skn-progress-track: rgba(255,255,255,0.20);
    --skn-progress-fill:  #DC143C;
    --skn-radius:         8px;
    --skn-shadow:         0 2px 12px rgba(0,0,0,0.15);
    --skn-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
}

/* Evoke explicit class (same as default, for clarity) */
.skn-audio-player.skn-theme-evoke {
    --skn-bg:             #f4f4f4;
    --skn-border:         #d8d8d8;
    --skn-header-bg:      #0d0d0d;
    --skn-header-fg:      #ffffff;
    --skn-accent:         #DC143C;
    --skn-accent-hover:   #b01030;
    --skn-item-hover:     #ececec;
    --skn-playing-bg:     #fde8ec;
    --skn-text-primary:   #0d0d0d;
    --skn-text-muted:     #757575;
    --skn-badge-bg:       #0d0d0d;
    --skn-badge-fg:       #ffffff;
    --skn-np-bg:          #1a1a1a;
    --skn-np-fg:          #ffffff;
    --skn-progress-track: rgba(255,255,255,0.20);
    --skn-progress-fill:  #DC143C;
}

/* Government theme */
.skn-audio-player.skn-theme-government {
    --skn-bg:           #ffffff;
    --skn-border:       #d0d7de;
    --skn-header-bg:    #005f35;
    --skn-header-fg:    #ffffff;
    --skn-accent:       #c9a227;
    --skn-accent-hover: #a88420;
    --skn-item-hover:   #f0f7f2;
    --skn-playing-bg:   #e8f5ee;
    --skn-text-primary: #1a1a2e;
    --skn-text-muted:   #6b7280;
    --skn-badge-bg:     #005f35;
    --skn-badge-fg:     #ffffff;
    --skn-np-bg:        #003d22;
    --skn-np-fg:        #ffffff;
    --skn-progress-track: rgba(255,255,255,0.25);
    --skn-progress-fill:  #c9a227;
}

/* Dark theme */
.skn-audio-player.skn-theme-dark {
    --skn-bg:           #1e1e2e;
    --skn-border:       #3d3d5c;
    --skn-header-bg:    #13131f;
    --skn-header-fg:    #e2e2f0;
    --skn-accent:       #7c6fcd;
    --skn-accent-hover: #6459b0;
    --skn-item-hover:   #2a2a3e;
    --skn-playing-bg:   #2a2a4e;
    --skn-text-primary: #e2e2f0;
    --skn-text-muted:   #9999b3;
    --skn-badge-bg:     #7c6fcd;
    --skn-badge-fg:     #ffffff;
    --skn-np-bg:        #0d0d1a;
    --skn-np-fg:        #e2e2f0;
    --skn-progress-track: rgba(255,255,255,0.15);
    --skn-progress-fill:  #7c6fcd;
}

/* Light / Minimal theme */
.skn-audio-player.skn-theme-light {
    --skn-bg:           #fafafa;
    --skn-border:       #e5e7eb;
    --skn-header-bg:    #f3f4f6;
    --skn-header-fg:    #111827;
    --skn-accent:       #2563eb;
    --skn-accent-hover: #1d4ed8;
    --skn-item-hover:   #f0f4ff;
    --skn-playing-bg:   #eff6ff;
    --skn-text-primary: #111827;
    --skn-text-muted:   #6b7280;
    --skn-badge-bg:     #2563eb;
    --skn-badge-fg:     #ffffff;
    --skn-np-bg:        #1e3a8a;
    --skn-np-fg:        #ffffff;
    --skn-progress-track: rgba(255,255,255,0.3);
    --skn-progress-fill:  #fbbf24;
}

/* ── Base layout ── */
.skn-audio-player {
    font-family:  var(--skn-font);
    font-size:    15px;
    color:        var(--skn-text-primary);
    background:   var(--skn-bg);
    border:       1px solid var(--skn-border);
    border-radius: var(--skn-radius);
    box-shadow:   var(--skn-shadow);
    overflow:     hidden;
    max-width:    680px;
    width:        100%;
    box-sizing:   border-box;
}

/* ── Header ── */
.skn-player-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    background:      var(--skn-header-bg);
    color:           var(--skn-header-fg);
}

.skn-player-logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-weight: 600;
    font-size:   15px;
    letter-spacing: 0.3px;
}

.skn-refresh-btn {
    background:   transparent;
    border:       none;
    color:        var(--skn-header-fg);
    cursor:       pointer;
    padding:      4px;
    opacity:      0.75;
    border-radius: 4px;
    transition:   opacity .2s, background .2s;
    display:      flex;
    align-items:  center;
}
.skn-refresh-btn:hover {
    opacity:    1;
    background: rgba(255,255,255,0.15);
}

/* ── Now Playing Bar ── */
.skn-now-playing {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 16px;
    background:      var(--skn-np-bg);
    color:           var(--skn-np-fg);
    flex-wrap:       wrap;
}

.skn-np-controls {
    display: flex;
    gap:     6px;
}

.skn-btn-play-pause,
.skn-btn-stop {
    background:   rgba(255,255,255,0.12);
    border:       none;
    color:        var(--skn-np-fg);
    cursor:       pointer;
    padding:      6px 8px;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   background .2s;
}
.skn-btn-play-pause:hover,
.skn-btn-stop:hover {
    background: rgba(255,255,255,0.25);
}

.skn-np-info {
    flex:     1;
    min-width: 0;
}

.skn-np-title {
    display:      block;
    font-size:    13px;
    font-weight:  500;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.skn-np-progress-wrap {
    height:       4px;
    background:   var(--skn-progress-track);
    border-radius: 2px;
    overflow:     hidden;
}
.skn-np-progress-bar {
    height:     100%;
    width:      0%;
    background: var(--skn-progress-fill);
    transition: width .25s linear;
    border-radius: 2px;
}

.skn-np-speed {
    display: flex;
    align-items: center;
}
.skn-speed-select {
    background:   rgba(255,255,255,0.12);
    border:       1px solid rgba(255,255,255,0.2);
    color:        var(--skn-np-fg);
    padding:      3px 6px;
    border-radius: 4px;
    font-size:    12px;
    cursor:       pointer;
}

/* ── Filter tabs ── */
.skn-filter-bar {
    display:     flex;
    gap:         4px;
    padding:     8px 12px;
    background:  var(--skn-bg);
    border-bottom: 1px solid var(--skn-border);
    overflow-x:  auto;
    flex-wrap:   wrap;
}

.skn-filter-btn {
    padding:      5px 12px;
    border:       1px solid var(--skn-border);
    border-radius: 20px;
    background:   transparent;
    color:        var(--skn-text-muted);
    font-size:    12px;
    cursor:       pointer;
    white-space:  nowrap;
    transition:   background .2s, color .2s, border-color .2s;
}
.skn-filter-btn:hover,
.skn-filter-btn.active {
    background:   var(--skn-accent);
    border-color: var(--skn-accent);
    color:        #ffffff;
}

/* ── News List ── */
.skn-news-list {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--skn-border) transparent;
}
.skn-news-list::-webkit-scrollbar        { width: 5px; }
.skn-news-list::-webkit-scrollbar-track  { background: transparent; }
.skn-news-list::-webkit-scrollbar-thumb  { background: var(--skn-border); border-radius: 3px; }

/* ── Individual news item ── */
.skn-news-item {
    display:      flex;
    align-items:  flex-start;
    gap:          10px;
    padding:      12px 16px;
    border-bottom: 1px solid var(--skn-border);
    transition:   background .18s;
}
.skn-news-item:last-child {
    border-bottom: none;
}
.skn-news-item:hover {
    background: var(--skn-item-hover);
}
.skn-news-item.skn-playing {
    background: var(--skn-playing-bg);
    border-left: 3px solid var(--skn-accent);
    padding-left: 13px;
}
.skn-news-item.skn-paused {
    background: var(--skn-item-hover);
    border-left: 3px solid var(--skn-text-muted);
    padding-left: 13px;
}

/* Play button per item */
.skn-item-play-btn {
    flex-shrink:  0;
    width:        34px;
    height:       34px;
    border-radius: 50%;
    background:   var(--skn-accent);
    border:       none;
    color:        #ffffff;
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    transition:   background .2s, transform .1s;
    margin-top:   2px;
}
.skn-item-play-btn:hover {
    background:  var(--skn-accent-hover);
    transform:   scale(1.06);
}
.skn-news-item.skn-playing  .skn-item-play-btn { background: var(--skn-header-bg); }
.skn-news-item.skn-paused   .skn-item-play-btn { background: var(--skn-text-muted); }

/* Item info */
.skn-item-info {
    flex: 1;
    min-width: 0;
}
.skn-item-title {
    display:      block;
    font-size:    14px;
    font-weight:  500;
    line-height:  1.4;
    color:        var(--skn-text-primary);
    text-decoration: none;
    margin-bottom: 4px;
}
.skn-item-title:hover {
    text-decoration: underline;
    color:           var(--skn-accent);
}
.skn-item-meta {
    display:  flex;
    gap:      8px;
    flex-wrap: wrap;
    align-items: center;
}
.skn-source-badge {
    font-size:    11px;
    font-weight:  600;
    padding:      2px 7px;
    border-radius: 10px;
    background:   var(--skn-badge-bg);
    color:        var(--skn-badge-fg);
    white-space:  nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.skn-item-date {
    font-size:  12px;
    color:      var(--skn-text-muted);
}

/* Empty state */
.skn-no-items {
    padding:    32px 24px;
    text-align: center;
    color:      var(--skn-text-muted);
    font-size:  14px;
}

/* No speech warning */
.skn-no-speech-warning {
    background: #fff3cd;
    border:     1px solid #ffc107;
    color:      #856404;
    padding:    10px 16px;
    font-size:  13px;
}

/* ── Footer ── */
.skn-player-footer {
    padding:     8px 16px;
    font-size:   11px;
    color:       var(--skn-text-muted);
    text-align:  center;
    border-top:  1px solid var(--skn-border);
}

/* ── Responsive (shortcode player) ── */
@media ( max-width: 480px ) {
    .skn-now-playing {
        flex-direction: column;
        align-items:    flex-start;
    }
    .skn-np-speed { align-self: flex-end; }
    .skn-player-logo span { font-size: 13px; }
    .skn-news-list { max-height: 340px; }
}

/* ============================================================
   Inline Play Button  — injected above each post excerpt
   ============================================================ */

.evoke-play-wrap {
    margin-bottom: 10px;
}

.evoke-play-wrap--article {
    margin-bottom: 18px;
}

/* Use high specificity + !important so theme CSS cannot override */
body .evoke-inline-play,
.evoke-inline-play {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            5px !important;
    padding:        5px 12px !important;   /* smaller than before */
    background:     #0d0d0d !important;   /* black */
    color:          #ffffff !important;
    border:         none !important;
    border-radius:  14px !important;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size:      12px !important;
    font-weight:    600 !important;
    cursor:         pointer !important;
    letter-spacing: 0.2px !important;
    transition:     background .2s, transform .15s !important;
    box-shadow:     0 1px 4px rgba(0,0,0,0.30) !important;
    line-height:    1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    outline:        none !important;
}

body .evoke-inline-play:hover,
.evoke-inline-play:hover {
    background:  #2a2a2a !important;
    transform:   translateY(-1px) !important;
    color:       #ffffff !important;
}

body .evoke-inline-play:active,
.evoke-inline-play:active {
    transform: translateY(0) !important;
}

/* Playing state — slightly lighter black, shows ⏸ */
body .evoke-inline-play.is-playing,
.evoke-inline-play.is-playing {
    background: #333333 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.40) !important;
}
body .evoke-inline-play.is-playing:hover,
.evoke-inline-play.is-playing:hover {
    background: #444444 !important;
}

/* Paused state */
body .evoke-inline-play.is-paused,
.evoke-inline-play.is-paused {
    background: #666666 !important;
    box-shadow: none !important;
}

.evoke-play-svg {
    flex-shrink: 0;
    pointer-events: none;
}

/* Article-level button — same compact size */
.evoke-play-wrap--article .evoke-inline-play {
    padding:   6px 14px !important;
    font-size: 12px !important;
}

/* ============================================================
   Now-Playing Strip  — thin bar at bottom, hidden by default
   ============================================================ */

#evoke-np-strip {
    display:         none;    /* shown via JS when audio starts */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99999;
    background:      #0d0d0d;
    color:           #ffffff;
    padding:         8px 16px;
    align-items:     center;
    gap:             10px;
    font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:       13px;
    box-shadow:      0 -2px 12px rgba(0,0,0,0.40);
    min-height:      44px;
}

/* JS sets display:flex to show, display:none to hide */
#evoke-np-strip.is-active {
    display: flex;
}

.evoke-np-strip-icon {
    color:       #DC143C;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.evoke-np-strip-title {
    flex:          1;
    min-width:     0;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-weight:   500;
    font-size:     13px;
}

.evoke-np-strip-controls {
    display:     flex;
    gap:         6px;
    flex-shrink: 0;
}

.evoke-strip-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          4px;
    padding:      4px 10px;
    background:   rgba(255,255,255,0.12);
    color:        #ffffff;
    border:       1px solid rgba(255,255,255,0.20);
    border-radius: 14px;
    font-size:    12px;
    font-family:  inherit;
    cursor:       pointer;
    transition:   background .18s;
    white-space:  nowrap;
}
.evoke-strip-btn:hover {
    background: rgba(255,255,255,0.25);
}

.evoke-np-strip-brand {
    font-size:   10px;
    color:       rgba(255,255,255,0.40);
    flex-shrink: 0;
    white-space: nowrap;
}

/* On small screens hide the brand text & tighten padding */
@media ( max-width: 600px ) {
    .evoke-np-strip-brand { display: none; }
    #evoke-np-strip { padding: 7px 10px; gap: 7px; }
    .evoke-strip-btn { padding: 4px 8px; }
}