/**
 * AI Narrator Multi — Frontend stylesheet
 * Version: 1.3.0
 * Note: vendor prefixes preserved for browser compatibility
 */


/* Base / Custom properties */
.ai-voorlezer {
    --av-accent:#00e;
    --av-bg:#f5f4ff;
    --av-muted:rgba(0,0,0,.5);
    --av-radius:12px;
    --av-t:.18s ease;
    font-family:inherit;
}

/* Player container */
.ai-voorlezer-player {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:.6rem;
    background:var(--av-bg);
    border-radius:var(--av-radius);
    padding:.6rem .9rem;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,.08);
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    max-width:520px;
}

/* Play button */
.av-play-btn {
    -webkit-flex-shrink:0;
    -ms-flex-negative:0;
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:50%;
    border:none;
    background:var(--av-accent);
    color:#fff;
    cursor:pointer;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-transition:background var(--av-t),-webkit-transform var(--av-t);
    transition:background var(--av-t),transform var(--av-t);
    font-size:16px;
    line-height:1;
    padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.av-play-btn:hover:not(:disabled) {
    background:#034D96;
    -webkit-transform:scale(1.07);
    transform:scale(1.07);
}
.av-play-btn:active:not(:disabled) {
    -webkit-transform:scale(.96);
    transform:scale(.96);
}
.av-play-btn:disabled {
    opacity:.5;
    cursor:default;
}
.av-play-btn svg {
    width:16px;
    height:16px;
    fill:currentColor;
    pointer-events:none;
}

/* Extra controls */
.av-controls {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:.4rem;
}
.av-controls button {
    background:transparent;
    border:1px solid rgba(108,71,255,.3);
    border-radius:6px;
    color:var(--av-accent);
    font-size:11px;
    padding:3px 8px;
    cursor:pointer;
    -webkit-transition:background var(--av-t);
    transition:background var(--av-t);
    white-space:nowrap;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.av-controls button:hover {
    background:rgba(108,71,255,.1);
}

/* Meta / progress */
.av-meta {
    -webkit-box-flex:1;
    -ms-flex:1 1 120px;
    flex:1 1 120px;
    min-width:0;
}
.av-progress {
    width:100%;
    height:12px;
    background:transparent;
    cursor:pointer;
    position:relative;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    display:block;
    padding:4px 0;
    margin-bottom:1px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.av-progress-track {
    width:100%;
    height:4px;
    background:rgba(0,0,0,.1);
    border-radius:2px;
    overflow:hidden;
    pointer-events:none;
}
.av-progress-fill {
    height:100%;
    background:var(--av-accent);
    border-radius:2px;
    width:0%;
    -webkit-transition:width .25s linear;
    transition:width .25s linear;
    pointer-events:none;
}

/* Status text */
.ai-voorlezer-status {
    font-size:11px;
    color:var(--av-muted);
    white-space:nowrap;
    overflow:hidden;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    min-height:1em;
    line-height:1.4;
}

/* Mini variant */
.ai-voorlezer--mini {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:.3rem;
    vertical-align:middle;
}
.ai-voorlezer-mini-btn {
    width:28px;
    height:28px;
    border-radius:50%;
    border:none;
    background:var(--av-accent);
    color:#fff;
    cursor:pointer;
    font-size:12px;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-transition:background var(--av-t);
    transition:background var(--av-t);
    padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.ai-voorlezer-mini-btn:hover:not(:disabled) {
    background:#034D96;
}
.ai-voorlezer-mini-btn:disabled {
    opacity:.5;
    cursor:default;
}

/* Icon variant */
.ai-voorlezer--icon {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    gap:.25rem;
    vertical-align:middle;
}
.ai-voorlezer-icon-btn {
    padding:0;
    border:0;
    background:transparent;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    cursor:pointer;
    -webkit-transition:opacity var(--av-t);
    transition:opacity var(--av-t);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.ai-voorlezer-icon-btn:hover:not(:disabled) {
    opacity:.75;
}
.ai-voorlezer-icon-btn:disabled {
    opacity:.4;
    cursor:default;
}
.ai-voorlezer-icon {
    width:100%;
    height:auto;
    display:block;
}
.icon-text {
    font-size:12px;
    color:var(--av-muted);
}

/* Spinner animation */
@-webkit-keyframes av-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes av-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.av-spinner {
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    -webkit-animation:av-spin .7s linear infinite;
    animation:av-spin .7s linear infinite;
    vertical-align:middle;
}