/* VoiceFlow TTS – Player */
.vf-player-wrap { margin: 1.5em 0; }

.vf-player {
    --vfp-bg:      #fff;
    --vfp-border:  #e5e7eb;
    --vfp-text:    #111827;
    --vfp-sub:     #6b7280;
    --vfp-accent:  #6366f1;
    --vfp-ahover:  #4f46e5;
    --vfp-alight:  #eef2ff;
    --vfp-track:   #e5e7eb;
    --vfp-shadow:  0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);
    --vfp-r:       14px;
    --vfp-font:    -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

    display: grid;
    grid-template-areas: "play meta" "play ctrl";
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    padding: 18px 20px;
    background: var(--vfp-bg);
    border: 1px solid var(--vfp-border);
    border-radius: var(--vfp-r);
    box-shadow: var(--vfp-shadow);
    font-family: var(--vfp-font);
    font-size: 14px;
    color: var(--vfp-text);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    direction: ltr;
}

.vf-player::before {
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--vfp-accent),var(--vfp-ahover));
    opacity:0;transition:opacity .3s;
    border-radius:var(--vfp-r) var(--vfp-r) 0 0;
}
.vf-player.is-playing::before { opacity:1; }
.vf-player * { box-sizing:border-box; }

/* dark */
.vf-player.vf-dark {
    --vfp-bg:#1e1e2e;--vfp-border:#383858;--vfp-text:#e2e8f0;
    --vfp-sub:#94a3b8;--vfp-accent:#818cf8;--vfp-ahover:#a5b4fc;
    --vfp-alight:#312e81;--vfp-track:#383858;
    --vfp-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);
}

/* Play button */
.vf-play-btn {
    grid-area:play;
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;padding:0;border:none;border-radius:50%;
    background:var(--vfp-accent);color:#fff;cursor:pointer;flex-shrink:0;
    transition:background .15s,transform .15s,box-shadow .15s;
    box-shadow:0 2px 8px rgba(99,102,241,.35);
}
.vf-play-btn:hover { background:var(--vfp-ahover);transform:scale(1.06);box-shadow:0 4px 12px rgba(99,102,241,.45); }
.vf-play-btn:active { transform:scale(.96); }
.vf-play-btn:focus-visible { outline:3px solid var(--vfp-accent);outline-offset:3px; }
.vf-play-btn svg { width:22px;height:22px;fill:currentColor;pointer-events:none; }

@keyframes vfp-pulse { 0%,100%{box-shadow:0 2px 8px rgba(99,102,241,.35)} 50%{box-shadow:0 2px 16px rgba(99,102,241,.6)} }
.vf-player.is-playing .vf-play-btn { animation:vfp-pulse 2s ease-in-out infinite; }

/* Spinner */
.vf-spinner-ring { display:none;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%; }
@keyframes vfp-spin { to{transform:rotate(360deg)} }
.vf-player.is-loading .vf-spinner-ring { display:block;animation:vfp-spin .7s linear infinite; }
.vf-player.is-loading .vf-icon-play,
.vf-player.is-loading .vf-icon-pause { display:none!important; }
.vf-player.is-loading .vf-play-btn { pointer-events:none; }

/* Meta */
.vf-meta { grid-area:meta;min-width:0;display:flex;align-items:center;gap:8px; }
.vf-badge {
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--vfp-accent);background:var(--vfp-alight);
    padding:3px 8px;border-radius:20px;flex-shrink:0;white-space:nowrap;
}
.vf-badge svg { width:12px;height:12px;fill:currentColor; }
.vf-title { font-size:14px;font-weight:600;color:var(--vfp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Controls */
.vf-controls { grid-area:ctrl;display:flex;align-items:center;gap:10px;min-width:0; }

/* Seek */
.vf-seek-group { display:flex;align-items:center;gap:8px;flex:1;min-width:0; }
.vf-time { font-size:12px;color:var(--vfp-sub);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:34px; }
.vf-current { text-align:right; }
.vf-duration { text-align:left; }

.vf-seek {
    -webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;
    background:var(--vfp-track);outline:none;cursor:pointer;transition:height .15s;
    background-image:linear-gradient(var(--vfp-accent),var(--vfp-accent));
    background-size:0% 100%;background-repeat:no-repeat;min-width:60px;
}
.vf-seek:hover,.vf-seek:focus { height:6px; }
.vf-seek:focus-visible { outline:2px solid var(--vfp-accent);outline-offset:3px; }
.vf-seek::-webkit-slider-thumb {
    -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
    background:var(--vfp-accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .15s;
}
.vf-seek::-moz-range-thumb { width:14px;height:14px;border-radius:50%;border:none;background:var(--vfp-accent);cursor:pointer; }
.vf-seek:hover::-webkit-slider-thumb,.vf-seek:focus::-webkit-slider-thumb { transform:scale(1.25); }

/* Control buttons */
.vf-ctrl-btn {
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;padding:0;border:none;border-radius:8px;
    background:transparent;color:var(--vfp-sub);cursor:pointer;
    transition:background .15s,color .15s;flex-shrink:0;
    font-family:var(--vfp-font);text-decoration:none;
}
.vf-ctrl-btn:hover { background:rgba(0,0,0,.05);color:var(--vfp-text); }
.vf-ctrl-btn:focus-visible { outline:2px solid var(--vfp-accent);outline-offset:2px; }
.vf-ctrl-btn svg { width:18px;height:18px;fill:currentColor;pointer-events:none; }
.vf-mute-btn[aria-pressed="true"] { color:var(--vfp-accent);background:var(--vfp-alight); }

/* Speed */
.vf-speed-wrap { position:relative; }
.vf-speed-btn { width:auto;padding:0 10px;font-size:12px;font-weight:700;height:28px; }
.vf-speed-btn[aria-expanded="true"] { background:rgba(0,0,0,.05); }

.vf-speed-menu {
    position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
    background:var(--vfp-bg);border:1px solid var(--vfp-border);border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.12);list-style:none;margin:0;padding:4px;z-index:100;min-width:80px;
}
.vf-speed-menu[hidden] { display:none; }
.vf-speed-menu li { padding:7px 14px;font-size:13px;cursor:pointer;border-radius:5px;text-align:center;color:var(--vfp-sub);transition:background .1s,color .1s; }
.vf-speed-menu li:hover { background:rgba(0,0,0,.05);color:var(--vfp-text); }
.vf-speed-menu li[aria-selected="true"] { color:var(--vfp-accent);font-weight:700;background:var(--vfp-alight); }

/* SR-only */
.vf-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Responsive */
@media(max-width:520px){
    .vf-player { grid-template-areas:"meta meta""play ctrl";padding:14px 16px;column-gap:12px; }
    .vf-speed-wrap { display:none; }
}