/* Cordial — read aloud mini player (speak.js). Classes are prefixed ra-. */

.ra-player {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 70;
    width: max-content;
    max-width: min(680px, calc(100vw - 32px));
    min-width: min(460px, calc(100vw - 32px));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "eq info controls stop";
    align-items: center;
    column-gap: 10px;
    padding: 6px 6px 6px 16px;
    background: var(--panel, var(--surface, #fff));
    color: var(--text, #111);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: 18px;
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.3;
    opacity: 0;
    transform: translate(-50%, calc(100% + 32px));
    transition: transform 0.26s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.2s ease;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}
.ra-player[hidden] { display: none; }
.ra-player.ra-show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.ra-head { display: contents; }
.ra-eq { grid-area: eq; }
.ra-info { grid-area: info; }
.ra-controls { grid-area: controls; }
.ra-stop { grid-area: stop; }

/* ---------- equaliser ---------- */
.ra-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    width: 18px;
    height: 16px;
    color: var(--accent, #4f46e5);
}
.ra-eq i {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    transform-origin: bottom;
    animation: ra-eq 0.9s ease-in-out infinite alternate;
}
.ra-eq i:nth-child(1) { animation-delay: -0.2s; }
.ra-eq i:nth-child(2) { animation-delay: -0.55s; animation-duration: 0.7s; }
.ra-eq i:nth-child(3) { animation-delay: -0.1s; animation-duration: 1.05s; }
.ra-eq i:nth-child(4) { animation-delay: -0.4s; animation-duration: 0.8s; }
@keyframes ra-eq {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}
.ra-paused .ra-eq i { animation-play-state: paused; }
.ra-paused .ra-eq { color: var(--text-muted, #666); }

/* ---------- title + progress ---------- */
.ra-info { min-width: 0; display: grid; gap: 6px; }
.ra-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ra-label { color: var(--text-muted, #666); font-weight: 600; }
.ra-dot { color: var(--text-muted, #666); }
.ra-name { font-weight: 700; }
.ra-progress {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: var(--border, rgba(0, 0, 0, 0.1));
    overflow: hidden;
}
.ra-fill {
    position: absolute;
    inset: 0;
    background: var(--accent, #4f46e5);
    border-radius: inherit;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.3s var(--ease-out, ease-out);
}

/* ---------- buttons ---------- */
.ra-controls { display: flex; align-items: center; gap: 4px; }
.ra-btn,
.ra-seg-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.ra-btn {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 12px;
    background: transparent;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.ra-play {
    width: 44px;
    border-radius: 50%;
    background: var(--accent, #4f46e5);
    color: var(--on-accent, #fff);
}
.ra-speed {
    min-width: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--input, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}
.ra-stop { color: var(--text-muted, #666); }
.ra-btn:active,
.ra-seg-btn:active { transform: scale(0.94); }

.ra-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 12px;
    background: var(--input, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}
.ra-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted, #666);
    font-weight: 600;
    font-size: 0.86rem;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.ra-seg-btn[aria-pressed="true"] {
    background: var(--surface, #fff);
    color: var(--text, #111);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border, rgba(0, 0, 0, 0.08));
}
.ra-sym { font-size: 1rem; line-height: 1; }

.ra-btn:focus-visible,
.ra-seg-btn:focus-visible {
    outline: 2px solid var(--accent, #4f46e5);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .ra-btn:hover { background: var(--accent-soft, rgba(79, 70, 229, 0.1)); }
    .ra-play:hover { background: var(--accent, #4f46e5); filter: brightness(1.08); }
    .ra-stop:hover { color: var(--text, #111); }
    .ra-seg-btn:hover:not([aria-pressed="true"]) { color: var(--text, #111); }
}

/* ---------- phones: two rows, sits above the tab bar ---------- */
@media (max-width: 760px) {
    .ra-player {
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
        min-width: 0;
        max-width: 520px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "eq info stop"
            "controls controls controls";
        row-gap: 4px;
        padding: 4px 4px 6px 14px;
        border-radius: 20px;
    }
    .ra-controls {
        justify-content: space-between;
        padding-right: 10px;
    }
    .ra-seg { flex: 0 1 auto; }
}
@media (max-width: 340px) {
    .ra-seg-text { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ra-player { transform: translate(-50%, 0); transition: opacity 0.15s linear; }
    .ra-eq i { animation: none; transform: scaleY(0.6); }
    .ra-eq i:nth-child(2), .ra-eq i:nth-child(4) { transform: scaleY(0.9); }
    .ra-fill { transition: none; }
}
:root[data-motion="reduce"] .ra-player { transform: translate(-50%, 0); transition: opacity 0.15s linear; }
:root[data-motion="reduce"] .ra-eq i { animation: none; transform: scaleY(0.6); }
:root[data-motion="reduce"] .ra-eq i:nth-child(2),
:root[data-motion="reduce"] .ra-eq i:nth-child(4) { transform: scaleY(0.9); }
:root[data-motion="reduce"] .ra-fill { transition: none; }