/* CBN Resumo IA — Frontend v1.6.1 */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.x/dist/tabler-icons.min.css');

.cbnr-widget-wrap {
    margin: 0 0 28px;
    --cbnr-color: #c62828;
}

/* ── Player ──────────────────────────────────────── */
.cbnr-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    font-size: 13px;
    width: 30%;
    min-width: 180px;
}

.cbnr-player--artigo  { margin-bottom: 8px; }
.cbnr-player--resumo  { margin: 8px 16px 14px; }

/* Botão play/pause */
.cbnr-btn-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #333;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 17px;
    flex-shrink: 0;
    transition: background .15s;
}

.cbnr-btn-play:hover   { background: rgba(0,0,0,.07); }
.cbnr-btn-play:active  { transform: scale(.94); }
.cbnr-btn-play:disabled { opacity: .5; cursor: default; }

/* Animação de ondas */
.cbnr-wave-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.cbnr-wave-wrap span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(0,0,0,.2);
    height: 3px; /* linha fina quando parado */
    transition: height .2s ease;
}

/* Tocando: barras animadas */
.cbnr-player[data-state="playing"] .cbnr-wave-wrap span {
    background: var(--cbnr-color);
    animation: cbnr-wave 1s ease-in-out infinite;
}

.cbnr-player[data-state="playing"] .cbnr-wave-wrap span:nth-child(1) { animation-delay: 0s;    height: 8px; }
.cbnr-player[data-state="playing"] .cbnr-wave-wrap span:nth-child(2) { animation-delay: .15s;  height: 14px; }
.cbnr-player[data-state="playing"] .cbnr-wave-wrap span:nth-child(3) { animation-delay: .3s;   height: 18px; }
.cbnr-player[data-state="playing"] .cbnr-wave-wrap span:nth-child(4) { animation-delay: .15s;  height: 14px; }
.cbnr-player[data-state="playing"] .cbnr-wave-wrap span:nth-child(5) { animation-delay: 0s;    height: 8px; }

@keyframes cbnr-wave {
    0%, 100% { transform: scaleY(1);   }
    50%       { transform: scaleY(.4); }
}

/* Pausado: barras estáticas em meia altura */
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span {
    background: rgba(0,0,0,.25);
}
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span:nth-child(1) { height: 6px; }
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span:nth-child(2) { height: 10px; }
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span:nth-child(3) { height: 14px; }
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span:nth-child(4) { height: 10px; }
.cbnr-player[data-state="paused"] .cbnr-wave-wrap span:nth-child(5) { height: 6px; }

/* Skip group (oculto no browser, visível em engines IA) */
.cbnr-skip-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cbnr-controls-hidden {
    display: none !important;
}

.cbnr-btn-back,
.cbnr-btn-fwd {
    position: relative;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 20px;
    padding: 0;
    flex-shrink: 0;
    transition: opacity .15s;
}

.cbnr-btn-back:hover,
.cbnr-btn-fwd:hover { opacity: .6; }

.cbnr-skip-label {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: #333;
    pointer-events: none;
    line-height: 1;
}

.cbnr-btn-speed {
    background: none;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}

.cbnr-btn-speed:hover { opacity: .7; }

/* Label */
.cbnr-player-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cbnr-color);
    white-space: nowrap;
}

/* Erro */
.cbnr-player-error {
    font-size: 11px;
    color: var(--cbnr-color);
}

/* ── Widget colapsável ───────────────────────────── */
.cbnr-widget {
    border-left: 3px solid var(--cbnr-color);
    border-top:    1px solid rgba(0,0,0,.08);
    border-right:  1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    border-radius: 0 10px 10px 0;
    background: #fff;
    overflow: hidden;
    font-family: inherit;
}

.cbnr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px 9px 16px;
    background: var(--cbnr-color);
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease;
}

.cbnr-header:hover { filter: brightness(.92); }

.cbnr-badge {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cbnr-badge::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    flex-shrink: 0;
}

.cbnr-chevron {
    color: rgba(255,255,255,.8);
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.cbnr-header[aria-expanded="true"] .cbnr-chevron {
    transform: rotate(180deg);
}

.cbnr-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}

.cbnr-body.cbnr-open { max-height: 1200px; }

.cbnr-list {
    margin: 0;
    padding: 10px 16px 6px;
    list-style: none;
}

.cbnr-item {
    position: relative;
    padding: 6px 0 6px 18px;
    line-height: 1.5;
    color: #222;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.cbnr-item:last-child { border-bottom: none; padding-bottom: 2px; }

.cbnr-item::before {
    content: "·";
    position: absolute;
    left: 4px; top: 5px;
    color: var(--cbnr-color);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

@media (max-width: 480px) {
    .cbnr-player-label { display: none; }
    .cbnr-item         { font-size: 13px; }
}
