/* VCA AI lector UX parity hotfix: course-AI style transport, read-along and floating controls. */
.vca-lector {
    position: relative;
    margin: 16px 0 24px;
    padding: 18px;
    border: 1px solid rgba(245, 181, 94, 0.38);
    border-radius: 20px;
    background: rgba(255, 252, 246, 0.96);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.vca-lector__header { text-align: center; color: #071831; font-weight: 900; }
.vca-lector__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; }
.vca-lector__action {
    min-height: 40px; padding: 9px 15px; border: 1px solid rgba(126, 88, 48, 0.12); border-radius: 999px;
    background: rgba(255,255,255,.88); color: #1f2937; box-shadow: 0 7px 18px rgba(99,102,241,.09);
    font: inherit; font-size: 14px; font-weight: 850; cursor: pointer;
}
.vca-lector__action--primary { border-color: transparent; background: linear-gradient(135deg,#6678ff 0%,#8b5cf6 100%); color: #fff; }
.vca-lector__action:disabled { opacity: .45; cursor: default; box-shadow: none; }
.vca-lector__volume { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 999px; background:#fff; }
.vca-lector__progress-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 14px; }
.vca-lector__progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.36); }
.vca-lector__progress > span { display:block; width:0; height:100%; border-radius:inherit; background:#6678ff; transition:width .12s linear; }
.vca-lector__time { display:flex; gap:4px; color:#64748b; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.vca-lector__status { margin: 9px 0 0; text-align:center; font-weight:800; }
.vca-lector__status:empty { display:none; }

.vca-app__lesson [data-vca-lector-content] > h3,
.vca-app__lesson [data-vca-lector-content] > .vca-app__lead,
.vca-app__lesson .vca-app__lesson-section { transition: background-color .16s ease, box-shadow .16s ease, outline-color .16s ease; }
.vca-app__lesson .vca-lector-fragment--active {
    background: rgba(37,99,235,.055) !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.055), 0 14px 30px rgba(37,99,235,.06);
    outline: 2px solid rgba(37,99,235,.36);
    outline-offset: 3px;
    border-radius: 16px;
}
.vca-app__lesson [data-vca-lector-content] > h3.vca-lector-fragment--active,
.vca-app__lesson [data-vca-lector-content] > .vca-app__lead.vca-lector-fragment--active { padding: 8px 10px; margin-left:-10px; margin-right:-10px; }
.vca-lector-word { display:inline; margin:0; padding:0; border-radius:.28em; font:inherit; line-height:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background-color .10s ease; }
.vca-lector-word--active { background: rgba(37,99,235,.18); box-shadow:none; }

.vca-lector-floating {
    position: fixed; left:50%; top:calc(max(10px, env(safe-area-inset-top)) + var(--wp-admin--admin-bar--height, 0px)); z-index:99999;
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; width:min(620px,calc(100vw - 28px)); padding:10px 13px;
    border:1px solid rgba(245,181,94,.34); border-radius:17px; background:rgba(255,252,246,.97); box-shadow:0 16px 40px rgba(15,23,42,.16);
    transform:translate(-50%,-125%); opacity:0; pointer-events:none; transition:transform .18s ease,opacity .18s ease; backdrop-filter:blur(12px);
}
.vca-lector-floating.is-visible { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.vca-lector-floating__title { color:#071831; font-size:12px; font-weight:900; white-space:nowrap; }
.vca-lector-floating__controls { display:flex; justify-content:center; gap:7px; }
.vca-lector-floating__button { min-height:35px; padding:8px 13px; border:1px solid rgba(126,88,48,.12); border-radius:999px; background:#fff; color:#1f2937; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
.vca-lector-floating__button.is-primary { border-color:transparent; background:linear-gradient(135deg,#6678ff 0%,#8b5cf6 100%); color:#fff; }

@media (max-width: 640px) {
    .vca-lector { position:relative; padding:14px; margin:14px 0 20px; }
    .vca-lector__controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .vca-lector__action { width:100%; min-width:0; padding:8px 9px; font-size:13px; }
    .vca-lector__volume { grid-column:1 / -1; justify-content:center; width:100%; box-sizing:border-box; }
    .vca-lector__volume-range { width:min(190px,60vw); }
    .vca-lector__progress-wrap { grid-template-columns:1fr; gap:5px; }
    .vca-lector__time { justify-content:flex-end; }
    .vca-app__lesson .vca-lector-fragment--active { outline-offset:2px; box-shadow:0 0 0 3px rgba(37,99,235,.05); }
    .vca-lector-floating, .vca-lector-floating.is-visible { top:0; width:min(560px,calc(100vw - 18px)); padding:6px 10px; gap:6px; border-radius:14px; }
    .vca-lector-floating__title { font-size:11px; }
    .vca-lector-floating__controls { gap:5px; }
    .vca-lector-floating__button { min-height:32px; padding:6px 10px; font-size:11px; }
}
@media (max-width: 420px) {
    .vca-lector-floating { grid-template-columns:1fr; gap:4px; }
    .vca-lector-floating__title { text-align:center; line-height:1; }
    .vca-lector-floating__controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
    .vca-lector-floating__button { width:100%; padding-left:5px; padding-right:5px; }
}