/* Metabolia Voice 4.6.0. O grosso do visual vem do clone; aqui vivem o
   modal de custo, a faixa em modo leitura (vestida a serio na 4.1.0) e a
   onda. A onda mostra-se; a transcricao continua escondida porque e do
   ditado (V3). */

#intro-voice-cost-modal {
    position: fixed; inset: 0; z-index: 100300;
    background: rgba(10, 9, 8, .85);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.intro-light #intro-voice-cost-modal { background: rgba(245, 242, 235, .92); }
.iv-cost-box { max-width: 380px; width: 92%; text-align: left; padding: 1.4rem 1.2rem; }
.iv-cost-text { margin: .7rem 0 1.2rem; line-height: 1.5; }
.iv-cost-row { display: flex; gap: .6rem; justify-content: flex-end; }
.iv-btn {
    padding: .55rem 1.05rem; border-radius: 10px;
    border: 1px solid var(--accent, #8FB3A0);
    background: transparent; color: inherit;
    font-size: .92rem; cursor: pointer;
}
.iv-btn:active { transform: scale(.97); }
.iv-btn--ok { background: var(--accent, #8FB3A0); border-color: var(--accent, #8FB3A0); color: #10100e; }

/* a faixa em modo leitura: icones fantasma na ordem Pausa, Recomecar, Parar,
   1x, onda. O CSS do beta (transplantado no clone) pintava os proprios svg
   como chips de 40px com fundo e borda, e dava ao Parar uma moldura por id:
   tudo neutralizado aqui com selectores mais fortes. */
#intro-voice-banner.iv-playing {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
#intro-voice-banner.iv-playing #intro-voice-transcript { display: none !important; }
#intro-voice-banner.iv-playing #intro-voice-banner-label { display: none !important; }
#intro-voice-banner.iv-playing #intro-voice-banner-dot { display: none !important; }
#intro-voice-banner.iv-playing #intro-voice-controls {
    display: flex !important;
    gap: 6px;
    order: 1;
    flex: 0 0 auto;
    align-items: center;
    margin-left: 0 !important;
}
#intro-voice-banner.iv-playing #intro-voice-wave {
    display: block !important;
    order: 2;
    flex: 1 1 auto;
    min-width: 72px;
    height: 38px;
}
#intro-voice-banner.iv-playing .intro-vc-btn,
#intro-voice-banner.iv-playing #intro-voice-banner-stop {
    width: 44px !important;
    height: 44px !important;
    flex-direction: row !important;
    border: none !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #E8E4DA !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .1s ease;
}
#intro-voice-banner.iv-playing .intro-vc-btn svg,
#intro-voice-banner.iv-playing #intro-voice-banner-stop svg {
    width: 21px !important;
    height: 21px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-sizing: content-box !important;
    color: inherit !important;
    stroke: currentColor;
    display: block;
}
#intro-voice-banner.iv-playing .intro-vc-btn .intro-vc-lbl { display: none !important; }
#intro-voice-banner.iv-playing .intro-vc-btn:active,
#intro-voice-banner.iv-playing #intro-voice-banner-stop:active {
    transform: scale(.9);
    background: rgba(255, 255, 255, .08) !important;
}
#intro-voice-banner.iv-playing .intro-vc-btn--stop,
#intro-voice-banner.iv-playing #intro-voice-banner-stop { color: #D0533C !important; }
#intro-voice-banner.iv-playing #intro-vc-speed {
    width: auto !important;
    min-width: 50px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .04) !important;
    border-radius: 19px !important;
    padding: 0 12px !important;
    margin-left: 4px !important;
    font-size: .84rem;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: #E8E4DA !important;
}

.intro-light #intro-voice-banner.iv-playing .intro-vc-btn,
.intro-light #intro-voice-banner.iv-playing #intro-voice-banner-stop { color: #1A1915 !important; }
.intro-light #intro-voice-banner.iv-playing .intro-vc-btn:active,
.intro-light #intro-voice-banner.iv-playing #intro-voice-banner-stop:active { background: rgba(26, 25, 21, .08) !important; }
.intro-light #intro-voice-banner.iv-playing .intro-vc-btn--stop,
.intro-light #intro-voice-banner.iv-playing #intro-voice-banner-stop { color: #B5452E !important; }
.intro-light #intro-voice-banner.iv-playing #intro-vc-speed {
    border-color: rgba(26, 25, 21, .22) !important;
    background: rgba(26, 25, 21, .04) !important;
    color: #1A1915 !important;
}

/* 5.0.2: a faixa em modo ditado (o teu turno na chamada). A onda dança com a
   tua voz a esquerda; o telefone vermelho de desligar fica a direita, ao
   polegar; o Continuar surge em pausa ou na janela de envio. Espelha a leitura. */
#intro-voice-banner.iv-dictate {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
#intro-voice-banner.iv-dictate #intro-voice-transcript,
#intro-voice-banner.iv-dictate #intro-voice-banner-label,
#intro-voice-banner.iv-dictate #intro-voice-banner-dot,
#intro-voice-banner.iv-dictate #intro-voice-controls,
#intro-voice-banner.iv-dictate #intro-voice-banner-stop { display: none !important; }
#intro-voice-banner.iv-dictate #intro-voice-wave {
    display: block !important;
    order: 1;
    flex: 1 1 auto;
    min-width: 72px;
    height: 38px;
}
#intro-voice-banner.iv-dictate #intro-voice-dictate-controls,
#intro-voice-banner.iv-dictate .intro-voice-dictate-controls {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 !important;
}
#intro-voice-banner.iv-dictate .intro-vc-btn {
    width: 44px !important;
    height: 44px !important;
    flex-direction: row !important;
    border: none !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #E8E4DA !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .1s ease;
}
#intro-voice-banner.iv-dictate .intro-vc-btn svg {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-sizing: content-box !important;
    color: inherit !important;
    stroke: currentColor;
    display: block;
}
#intro-voice-banner.iv-dictate .intro-vc-btn .intro-vc-lbl { display: none !important; }
#intro-voice-banner.iv-dictate .intro-vc-btn:active {
    transform: scale(.9);
    background: rgba(255, 255, 255, .08) !important;
}
/* o telefone vermelho de desligar a chamada, a direita */
#intro-voice-banner.iv-dictate #iv-dic-stop { color: #D0533C !important; }
.intro-light #intro-voice-banner.iv-dictate .intro-vc-btn { color: #1A1915 !important; }
.intro-light #intro-voice-banner.iv-dictate #iv-dic-stop { color: #B5452E !important; }

.intro-msg-action--listen svg { width: 16px; height: 16px; }

/* 4.4.0: os quatro estados da bolha (idle, loading, playing, done) */
.intro-msg-action--listen .iv-ic { display: none; }
.intro-msg-action--listen[data-iv="idle"] .iv-ic-idle { display: block; }
.intro-msg-action--listen[data-iv="loading"] .iv-ic-load { display: block; }
.intro-msg-action--listen[data-iv="playing"] .iv-ic-play { display: block; }
.intro-msg-action--listen[data-iv="done"] .iv-ic-done { display: block; }
.intro-msg-action--listen[data-iv="loading"] { pointer-events: none; }
.intro-msg-action--listen[data-iv="playing"] { color: #D0533C; }
.intro-light .intro-msg-action--listen[data-iv="playing"] { color: #B5452E; }
.iv-ic-load {
    width: 13px; height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ivspin .8s linear infinite;
}
@keyframes ivspin { to { transform: rotate(360deg); } }

/* 4.4.0: o estado final da barra: pausa some, o quadrado vira X vermelho grosso */
#intro-voice-banner.iv-done #intro-vc-pause { display: none !important; }
#intro-voice-banner #intro-voice-banner-stop .iv-x { display: none !important; }
#intro-voice-banner.iv-playing:not(.iv-done) #intro-voice-banner-stop .iv-x { display: none !important; }
#intro-voice-banner.iv-done #intro-voice-banner-stop svg:not(.iv-x) { display: none !important; }
#intro-voice-banner.iv-done #intro-voice-banner-stop .iv-x { display: block !important; }

/* 4.4.1: o botao de descarregar, no lugar da pausa, so no estado final */
#intro-voice-banner #intro-vc-download { display: none; }
#intro-voice-banner.iv-done #intro-vc-download { display: flex !important; }

/* o modal do download (mesma linguagem do modal de custo) */
.intro-voice-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55);
    padding: 24px;
}
.intro-voice-modal__card {
    background: #1C1B18; color: #E8E4DA;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    max-width: 360px; width: 100%;
    padding: 22px 20px 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.intro-light .intro-voice-modal__card { background: #FBF9F4; color: #1A1915; border-color: rgba(26, 25, 21, .14); }
.intro-voice-modal__text { margin: 0 0 18px; font-size: .98rem; line-height: 1.5; }
.intro-voice-modal__row { display: flex; gap: 10px; justify-content: flex-end; }
.intro-voice-modal__btn {
    border: none; border-radius: 10px; cursor: pointer;
    padding: 10px 16px; font-size: .92rem; font-family: inherit;
}
.intro-voice-modal__btn--ghost { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .2); }
.intro-light .intro-voice-modal__btn--ghost { border-color: rgba(26, 25, 21, .2); }
.intro-voice-modal__btn--primary { background: #8FB3A0; color: #14110D; font-weight: 600; }

/* 4.5.0: o sublinhado palavra a palavra (apoio a leitura). A palavra activa
   ganha um realce suave da cor de acento da casa, sem saltar o layout. */
.intro-msg__text .iw { transition: background-color .12s ease, color .12s ease; border-radius: 4px; padding: 0 1px; }
.intro-msg__text .iw-active {
    background: rgba(143, 179, 160, .18);
    color: #EAF3EC;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(143, 179, 160, .12);
}
.intro-light .intro-msg__text .iw-active {
    background: rgba(143, 179, 160, .26);
    color: #1A2A20;
    box-shadow: 0 0 0 1px rgba(143, 179, 160, .2);
}

/* 4.5.0: o botao Ouvir da barra v8, ligado (ouvir automatico ON) */
#intro-v8-listen.intro-v8-on { color: #8FB3A0; }

/* 4.5.0: o check do modal (nao perguntar novamente) */
.intro-voice-modal__check {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; font-size: .9rem; cursor: pointer;
}
.intro-voice-modal__check input { width: 16px; height: 16px; }

/* 4.7.0: a barra v8 mostra Velocidade, Ouvir, Auto-falar e Falar. So o
   Incognito da barra fica fora (duplica o olho do header). O Falar (microfone
   de ditar) volta, agora que tem motor. */
body.intro-voice-on #intro-v8-bar { display: flex !important; }
body.intro-voice-on #intro-v8-bar-toggle { display: flex !important; }
body.intro-voice-on #intro-v8-bar #intro-v8-incognito { display: none !important; }
/* a barra recolhida pela pega */
body.intro-voice-collapsed #intro-v8-bar { display: none !important; }

/* 4.5.2: a Velocidade duplicada na faixa de leitura sai (fica so na barra v8) */
#intro-voice-controls #intro-vc-speed { display: none !important; }

/* ====================================================================
   V3: ouvir (voz alta), ditar, auto-falar.
   ==================================================================== */

/* A barra de volume de palavras: enche da esquerda para a direita; verde,
   laranja aos 75%, vermelha aos 90%, linha dupla vermelha aos 100%.
   So aparece com texto no campo. */
.intro-word-meter {
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    margin: 0 0 6px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease;
}
.intro-word-meter--show { opacity: 1; }
.intro-word-meter__fill {
    height: 100%;
    width: 0;
    background: #8FB3A0;
    border-radius: 3px;
    transition: width .15s ease, background-color .2s ease;
}
.intro-wm-amber .intro-word-meter__fill { background: #E0A458; }
.intro-wm-red .intro-word-meter__fill { background: #D9534F; }
.intro-wm-full {
    background: #D9534F;
    box-shadow: inset 0 0 0 1px #D9534F;
    height: 5px;
    border-top: 1px solid #D9534F;
}
.intro-wm-full .intro-word-meter__fill { background: #D9534F; }
.intro-light .intro-word-meter { background: rgba(0, 0, 0, .06); }

/* O controlo do ditado nasce escondido; a faixa em modo ditado (.iv-dictate, no
   bloco da 5.0.2 mais acima) mostra-o e poe-no a direita, com a onda a dançar a
   esquerda. A regra antiga que escondia a onda do ditado saiu na 5.0.3. */
#intro-voice-dictate-controls { display: none; }

/* Em modo ditado, o campo de escrita cresce com aquilo que dizes, ate um
   tecto generoso, e faz scroll ate ao fim para a ultima linha estar sempre a
   vista (o texto novo nunca fica escondido por baixo). */
body.intro-dictating #intro-input {
    max-height: 38vh;
    min-height: 64px;
    overflow-y: auto;
}

/* os botoes da barra v8 acesos: o microfone (Falar) e o Auto-falar */
#intro-v8-speak.intro-v8-on,
#intro-v8-autofalar.intro-v8-on { color: #8FB3A0; }

/* o Auto-falar leva uma etiqueta de duas linhas (o pedido do Jonas): texto
   pequeno e justo, para caber na barra ao lado dos outros. */
#intro-v8-autofalar span {
    font-size: .62rem;
    line-height: 1.05;
    text-align: center;
}

/* o titulo do modal */
.intro-voice-modal__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: #EAF3EC;
}
.intro-light .intro-voice-modal__title { color: #1A2A20; }

/* O SEMAFORO DO SILENCIO no aviao de enviar. Com o microfone aberto, mostra ha
   quanto tempo nao falas: segundos 1 a 3 pisca VERDE, segundo 4 fica AMARELO, e
   ao 5 (com o auto-enviar ligado) envia sozinho. Falar de novo apaga-o. */
@keyframes intro-send-sil-kf {
    0%   { box-shadow: 0 0 0 0 rgba(143, 179, 160, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(143, 179, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(143, 179, 160, 0); }
}
#intro-send.intro-send-sil-g {
    background: var(--accent, #8FB3A0);
    border-color: var(--accent, #8FB3A0);
    border-radius: 50%;
    animation: intro-send-sil-kf 1s ease-in-out infinite;
}
#intro-send.intro-send-sil-a {
    background: #E2B44A;
    border-color: #E2B44A;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(226, 180, 74, 0.28);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* O botao Continuar, na faixa de ditado, durante a janela de silencio: verde de
   acento, para se distinguir do Parar (que e vermelho). */
#intro-voice-banner .intro-vc-btn--go {
    color: var(--accent, #8FB3A0);
}
#intro-voice-banner .intro-vc-btn--go svg { stroke: var(--accent, #8FB3A0); }

/* V5: o ditado por streaming. Enquanto o token chega e a WebSocket abre, o
   microfone pulsa devagar e a faixa anuncia "A ligar o ditado..." (o texto vem
   do JS). Assim a pessoa sabe que arrancou, antes mesmo da primeira palavra. */
@keyframes intro-stt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
body.intro-stt-connecting #intro-v8-speak {
    animation: intro-stt-pulse 1.1s ease-in-out infinite;
}
body.intro-stt-connecting #intro-voice-banner .intro-vc-btn--stop { opacity: 0.6; }

/* ============================================================
   V5.0.1 (afinações do Jonas na barra de voz):
   (1) as etiquetas dos cinco botões ao mesmo tamanho e alinhadas;
   (2) o Auto-enviar acende ao toque, como os outros.
   ============================================================ */

/* (1a) todas as etiquetas ao mesmo tamanho, entrelinha e centradas: as de duas
   linhas (Auto-falar, Auto-enviar) ficam iguais às de uma linha. */
#intro-v8-bar .intro-v8-btn > span {
    font-size: .72rem;
    line-height: 1.15;
    text-align: center;
    letter-spacing: .01em;
}

/* (2) o Auto-enviar aceso, a par do Ouvir, do Falar e do Auto-falar (faltava só
   esta regra; o JavaScript já alternava a classe e o aria-pressed). */
#intro-v8-autoenviar.intro-v8-on { color: #8FB3A0; }

/* Fora da Conversa, a faixa de voz desaparece, mesmo com a voz ligada.
   A marca intro-not-chat vem do plugin nucleo ao sair da Conversa; esta regra,
   mais especifica que a de intro-voice-on, vence o display:flex de cima. */
body.intro-not-chat.intro-voice-on #intro-v8-bar,
body.intro-not-chat #intro-v8-bar,
body.intro-not-chat.intro-voice-on #intro-v8-bar-toggle,
body.intro-not-chat #intro-v8-bar-toggle { display: none !important; }