/* --- O BOTÃO CONFIGURADO IGUAL AO FIGMA --- */

/* Corresponde ao /* Button */ do Figma */
.container-botao {
    box-sizing: border-box;
    position: absolute;
    width: 176px;
    height: 117px;
    left: 593px;
    top: 532px;
    background: transparent; /* Remove o fundo branco para destacar a pílula azul */
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Corresponde ao /* Content */ do Figma */
.conteudo-botao {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 255px;
    height: 136px;
    background: #0088FF; /* Azul oficial do seu Figma */
    border-radius: 100px; /* Transforma o formato em pílula arredondada */
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: background-color 0.2s, transform 0.2s;
}

/* Corresponde ao /* State-layer */ do Figma */
.camada-estado-botao {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 48px 64px;
    gap: 16px; /* Distância exata entre o ícone e a palavra Falar */
    width: 255px;
    height: 136px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Corresponde ao /* Icon */ do Figma */
.icone-mic-container {
    width: 40px;
    height: 40px;
    flex: none;
    order: 0;
    flex-grow: 0;
    position: relative;
    /* Substitui a caixa preta por um ícone visual de microfone branco */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Corresponde ao /* Label */ do Figma */
.texto-botao {
    width: 71px;
    height: 40px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px; /* Tamanho real da fonte do seu projeto */
    line-height: 40px;
    display: flex;
    align-items: center;
    color: #FFFFFF; /* Mudado para branco para destacar em cima do azul */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* --- ANIMAÇÕES E INTERAÇÕES --- */

/* Feedback ao passar o mouse */
.container-botao:hover .conteudo-botao {
    background: #0077EE;
    transform: scale(1.02);
}

/* Quando você clicar para falar, o botão vira vermelho e pisca indicando gravação */
.container-botao.recording .conteudo-botao {
    background: #FF3B30;
    animation: pulse 1.5s infinite;
}