/* ME Resumo IA — Frontend (Direção A: Briefing Editorial) */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.x/dist/tabler-icons.min.css');

.mer-widget-wrap {
    margin: 0 0 28px;
    --mer-color: #0b4f8a;
}

/* ── Caixa editorial ─────────────────────────────── */
.mer-editorial {
    background: #faf9f6;
    border: 1px solid rgba(0,0,0,.08);
    border-top: 2px solid var(--mer-color);
    border-radius: 4px;
    padding: 14px 20px 16px;
    font-family: inherit;
}

/* Cabeçalho: "Em resumo" + Ouvir */
.mer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 9px;
    margin-bottom: 6px;
}

/* Botão de recolher/expandir (envolve título + chevron) */
.mer-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    flex: 0 1 auto;
}

.mer-title {
    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--mer-color);
}

.mer-chevron {
    color: var(--mer-color);
    font-size: 17px;
    opacity: .7;
    transition: transform .25s ease;
}
.mer-editorial:not(.mer-collapsed) .mer-chevron { transform: rotate(180deg); }

/* ── Lista numerada ──────────────────────────────── */
.mer-list {
    counter-reset: mer-counter;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 1600px;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}

.mer-collapsed .mer-list {
    max-height: 0;
    opacity: 0;
    margin-top: -6px;
}
.mer-collapsed .mer-head { border-bottom-color: transparent; margin-bottom: 0; }

.mer-item {
    counter-increment: mer-counter;
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 9px 0;
    line-height: 1.55;
    color: #23262b;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.mer-item:last-child { border-bottom: none; padding-bottom: 0; }

.mer-item::before {
    content: counter(mer-counter, decimal-leading-zero);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: .95em;
    color: var(--mer-color);
    min-width: 22px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    opacity: .85;
    padding-top: 1px;
}

/* ══════════════════════════════════════════════════
   PLAYERS (estrutura preservada p/ o tts.js)
   ══════════════════════════════════════════════════ */
.mer-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

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

/* Player do RESUMO — pílula discreta no cabeçalho */
.mer-player--resumo {
    flex-shrink: 0;
    gap: 7px;
    padding: 3px 13px 3px 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mer-color) 12%, transparent);
}
.mer-player--resumo .mer-wave-wrap { display: none; }   /* compacto: sem ondas no header */
.mer-player--resumo .mer-btn-play {
    width: 28px; height: 28px; font-size: 12px;
    box-shadow: none;
}

/* Player do ARTIGO — barra "podcast" acima da caixa */
.mer-player--artigo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mer-art-bg, #0b4f8a);
    color: var(--mer-art-text, #fff);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.mer-player--artigo .mer-art-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mer-art-text, #fff);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Botão play na barra: círculo claro com ícone na cor de fundo */
.mer-player--artigo .mer-btn-play {
    width: 36px; height: 36px;
    border: none;
    background: var(--mer-art-text, #fff);
    color: var(--mer-art-bg, #0b4f8a);
    font-size: 15px;
}
.mer-player--artigo .mer-btn-play:hover { background: var(--mer-art-text, #fff); filter: brightness(.9); }
/* Barra de progresso */
.mer-progress {
    flex: 1;
    min-width: 30px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,.28);
    background: color-mix(in srgb, var(--mer-art-text, #fff) 30%, transparent);
    overflow: hidden;
}
.mer-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--mer-art-text, #fff);
    transition: width .25s linear;
}
.mer-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mer-art-text, #fff);
    opacity: .92;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Controles avançados herdam a cor do texto da barra */
.mer-player--artigo .mer-btn-back,
.mer-player--artigo .mer-btn-fwd,
.mer-player--artigo .mer-skip-label { color: var(--mer-art-text, #fff); }
.mer-player--artigo .mer-btn-speed {
    color: var(--mer-art-text, #fff);
    border-color: color-mix(in srgb, var(--mer-art-text, #fff) 50%, transparent);
}

/* Botão play/pause — círculo preenchido */
.mer-btn-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--mer-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.mer-btn-play:hover    { filter: brightness(1.07); box-shadow: 0 2px 7px rgba(0,0,0,.24); }
.mer-btn-play:active   { transform: scale(.9); }
.mer-btn-play:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* Empurra o triângulo do play p/ o centro óptico (a pausa fica centrada) */
.mer-btn-play .mer-icon-play { margin-left: 2px; }

/* Rótulo "Ouvir" */
.mer-player-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mer-color);
    white-space: nowrap;
}

/* Ondas (somente no player do artigo) */
.mer-wave-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    flex: 1;
    min-width: 40px;
    max-width: 120px;
}
.mer-wave-wrap span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(0,0,0,.2);
    height: 3px;
    transition: height .2s ease;
}
.mer-player[data-state="playing"] .mer-wave-wrap span {
    background: var(--mer-color);
    animation: mer-wave 1s ease-in-out infinite;
}
.mer-player[data-state="playing"] .mer-wave-wrap span:nth-child(1){animation-delay:0s;  height:8px}
.mer-player[data-state="playing"] .mer-wave-wrap span:nth-child(2){animation-delay:.15s;height:14px}
.mer-player[data-state="playing"] .mer-wave-wrap span:nth-child(3){animation-delay:.3s; height:18px}
.mer-player[data-state="playing"] .mer-wave-wrap span:nth-child(4){animation-delay:.15s;height:14px}
.mer-player[data-state="playing"] .mer-wave-wrap span:nth-child(5){animation-delay:0s;  height:8px}
@keyframes mer-wave { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.4)} }
.mer-player[data-state="paused"] .mer-wave-wrap span { background: rgba(0,0,0,.25); }

/* Controles avançados (engines de IA) */
.mer-skip-group { display: flex; align-items: center; gap: 6px; }
.mer-btn-back, .mer-btn-fwd {
    position: relative; width: 26px; height: 26px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #444; font-size: 18px; padding: 0; flex-shrink: 0;
    transition: opacity .15s;
}
.mer-btn-back:hover, .mer-btn-fwd:hover { opacity: .6; }
.mer-skip-label {
    position: absolute; font-size: 8px; font-weight: 700;
    color: #444; pointer-events: none; line-height: 1;
}
.mer-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;
}
.mer-btn-speed:hover { opacity: .7; }

/* Erro */
.mer-player-error { font-size: 11px; color: #c0392b; }

/* ── Responsivo ──────────────────────────────────── */
@media (max-width: 480px) {
    .mer-editorial { padding: 12px 15px 14px; }
    .mer-item      { font-size: 13px; gap: 10px; }
    .mer-player--artigo .mer-art-title { display: none; }
    /* Alvos de toque maiores (recomendação ≥ 40px) */
    .mer-btn-play                   { width: 40px; height: 40px; font-size: 17px; }
    .mer-player--resumo .mer-btn-play { width: 34px; height: 34px; font-size: 14px; }
    .mer-btn-back, .mer-btn-fwd     { width: 34px; height: 34px; }
}