/* Voxis Public Player Accessibility Styles */

:root {
    --voxis-bg: #f8f9fa;
    --voxis-border: #e2e4e7;
    --voxis-btn-bg: #2271b1;
    --voxis-btn-hover: #135e96;
    --voxis-btn-text: #ffffff;
    --voxis-status-color: #50575e;
}

.voxis-player-wrapper.palette-dark {
    --voxis-bg: #1d2327;
    --voxis-border: #2c3338;
    --voxis-btn-bg: #ffffff;
    --voxis-btn-text: #1d2327;
    --voxis-btn-hover: #e0e0e0;
    --voxis-status-color: #a7aaad;
}

.voxis-player-wrapper.palette-green {
    --voxis-bg: #f0fdf4;
    --voxis-border: #bbf7d0;
    --voxis-btn-bg: #16a34a;
    --voxis-btn-text: #ffffff;
    --voxis-btn-hover: #15803d;
    --voxis-status-color: #166534;
}

.voxis-player-wrapper.palette-purple { --voxis-bg: #fdf4ff; --voxis-border: #f0abfc; --voxis-btn-bg: #a21caf; --voxis-btn-hover: #86198f; --voxis-btn-text: #ffffff; --voxis-status-color: #701a75; }
.voxis-player-wrapper.palette-orange { --voxis-bg: #fff7ed; --voxis-border: #fdba74; --voxis-btn-bg: #c2410c; --voxis-btn-hover: #9a3412; --voxis-btn-text: #ffffff; --voxis-status-color: #7c2d12; }
.voxis-player-wrapper.palette-red { --voxis-bg: #fef2f2; --voxis-border: #fca5a5; --voxis-btn-bg: #b91c1c; --voxis-btn-hover: #991b1b; --voxis-btn-text: #ffffff; --voxis-status-color: #7f1d1d; }
.voxis-player-wrapper.palette-cyan { --voxis-bg: #ecfeff; --voxis-border: #67e8f9; --voxis-btn-bg: #0e7490; --voxis-btn-hover: #155e75; --voxis-btn-text: #ffffff; --voxis-status-color: #164e63; }
.voxis-player-wrapper.palette-gray { --voxis-bg: #f3f4f6; --voxis-border: #d1d5db; --voxis-btn-bg: #4b5563; --voxis-btn-hover: #374151; --voxis-btn-text: #ffffff; --voxis-status-color: #1f2937; }
.voxis-player-wrapper.palette-yellow { --voxis-bg: #fefce8; --voxis-border: #fde047; --voxis-btn-bg: #a16207; --voxis-btn-hover: #854d0e; --voxis-btn-text: #ffffff; --voxis-status-color: #713f12; }
.voxis-player-wrapper.palette-magenta { --voxis-bg: #fdf2f8; --voxis-border: #f9a8d4; --voxis-btn-bg: #be185d; --voxis-btn-hover: #9d174d; --voxis-btn-text: #ffffff; --voxis-status-color: #831843; }

/* PRO Palettes */
.voxis-player-wrapper.palette-pro-teal { --voxis-bg: #f0fdfa; --voxis-border: #99f6e4; --voxis-btn-bg: #0d9488; --voxis-btn-hover: #0f766e; --voxis-btn-text: #ffffff; --voxis-status-color: #115e59; }
.voxis-player-wrapper.palette-pro-indigo { --voxis-bg: #e0e7ff; --voxis-border: #a5b4fc; --voxis-btn-bg: #4f46e5; --voxis-btn-hover: #4338ca; --voxis-btn-text: #ffffff; --voxis-status-color: #312e81; }
.voxis-player-wrapper.palette-pro-rose { --voxis-bg: #ffe4e6; --voxis-border: #fecdd3; --voxis-btn-bg: #e11d48; --voxis-btn-hover: #be123c; --voxis-btn-text: #ffffff; --voxis-status-color: #881337; }
.voxis-player-wrapper.palette-pro-amber { --voxis-bg: #fef3c7; --voxis-border: #fde68a; --voxis-btn-bg: #d97706; --voxis-btn-hover: #b45309; --voxis-btn-text: #ffffff; --voxis-status-color: #78350f; }
.voxis-player-wrapper.palette-pro-emerald { --voxis-bg: #ecfdf5; --voxis-border: #a7f3d0; --voxis-btn-bg: #059669; --voxis-btn-hover: #047857; --voxis-btn-text: #ffffff; --voxis-status-color: #064e3b; }
.voxis-player-wrapper.palette-pro-violet { --voxis-bg: #f5f3ff; --voxis-border: #ddd6fe; --voxis-btn-bg: #7c3aed; --voxis-btn-hover: #6d28d9; --voxis-btn-text: #ffffff; --voxis-status-color: #4c1d95; }
.voxis-player-wrapper.palette-pro-fuchsia { --voxis-bg: #fae8ff; --voxis-border: #f5d0fe; --voxis-btn-bg: #c026d3; --voxis-btn-hover: #a21caf; --voxis-btn-text: #ffffff; --voxis-status-color: #701a75; }
.voxis-player-wrapper.palette-pro-sky { --voxis-bg: #e0f2fe; --voxis-border: #bae6fd; --voxis-btn-bg: #0284c7; --voxis-btn-hover: #0369a1; --voxis-btn-text: #ffffff; --voxis-status-color: #0c4a6e; }
.voxis-player-wrapper.palette-pro-lime { --voxis-bg: #ecfccb; --voxis-border: #d9f99d; --voxis-btn-bg: #65a30d; --voxis-btn-hover: #4d7c0f; --voxis-btn-text: #ffffff; --voxis-status-color: #3f6212; }
.voxis-player-wrapper.palette-pro-stone { --voxis-bg: #f5f5f4; --voxis-border: #e7e5e4; --voxis-btn-bg: #57534e; --voxis-btn-hover: #44403c; --voxis-btn-text: #ffffff; --voxis-status-color: #292524; }


.voxis-player-wrapper {
    background: var(--voxis-bg);
    border: 1px solid var(--voxis-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    clear: both;
}

.voxis-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.voxis-select {
    background: transparent;
    border: 1px solid var(--voxis-border);
    color: var(--voxis-status-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.voxis-time-display {
    font-size: 13px;
    font-weight: 600;
    color: var(--voxis-status-color);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.voxis-track-container, .voxis-volume-container {
    height: 6px;
    background: rgba(0,0,0,0.08); /* Fallback */
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    width: 100%;
}
.voxis-track-container {
    margin-top: 14px;
}
.voxis-bottom-bars .voxis-track-container {
    margin-top: 0;
}

.voxis-track-progress, .voxis-volume-progress {
    height: 100%;
    width: 0%;
    background: var(--voxis-btn-bg);
    border-radius: 3px;
    position: relative;
}

.voxis-track-progress {
    transition: width 0.3s ease;
}

.voxis-volume-progress {
    transition: width 0.1s linear;
}

.voxis-track-progress::after, .voxis-volume-progress::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--voxis-btn-bg);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.voxis-volume-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--voxis-btn-bg);
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

.voxis-btn {
    background: var(--voxis-btn-bg);
    color: var(--voxis-btn-text) !important;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none !important;
}

.voxis-btn:hover {
    background: var(--voxis-btn-hover);
}

.voxis-btn:active {
    transform: scale(0.98);
}

.voxis-icon {
    font-size: 11px;
}

.voxis-status-indicator {
    margin-left: auto;
    font-size: 13px;
    color: var(--voxis-status-color);
    display: none; 
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.voxis-status-indicator.is-playing::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #46b450;
    animation: voxis-pulse 1.5s infinite;
}

@keyframes voxis-pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

@media (max-width: 600px) {
    .voxis-select,
    #voxis-user-tone,
    #voxis-user-speed {
        max-width: 65px;
        text-overflow: ellipsis;
    }
}