/* ==========================================================
   💬 Chat Styles - Estilos específicos do Chat
   ========================================================== */

body {
    background: var(--bg-secondary);
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}

.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.chat-header h1 {
    margin: 0;
    font-size: 24px;
}

.chat-header-actions {
    display: flex;
    gap: 10px;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: white;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    scroll-behavior: smooth; /* Scroll suave */
    /* Melhorar performance do scroll */
    -webkit-overflow-scrolling: touch;
    /* Garantir que sempre mostra conteúdo novo */
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
    /* Garantir altura mínima para scroll funcionar */
    min-height: 200px;
    max-height: calc(100vh - 300px); /* Altura máxima baseada na viewport */
    height: auto; /* Altura automática baseada no conteúdo */
}

/* Estilizar scrollbar para navegadores WebKit (Chrome, Safari, Edge) */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(102, 126, 234, 0.5);
    border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(102, 126, 234, 0.7);
}

.message {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.message.repi {
    align-items: flex-start;
}

.message.user {
    align-items: flex-end;
}

.message-content {
    max-width: 70%;
    padding: 15px;
    border-radius: 15px;
    word-wrap: break-word;
}

.message.repi .message-content {
    background: #f3f4f6;
    color: #1f2937;
    border-bottom-left-radius: 5px;
}

.message.user .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 5px;
}

.message-author {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    opacity: 0.7;
}

.chat-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s;
    position: relative;
}

.chat-input-container:focus-within {
    box-shadow: 0 8px 12px rgba(102, 126, 234, 0.15), 0 2px 4px rgba(102, 126, 234, 0.1);
}

.chat-input-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

/* Wrapper interno do input com botões dentro */
.chat-input-inner-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.chat-input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 28px;
    font-size: 18px;
    outline: none;
    transition: all 0.3s;
    background: #f9fafb;
    width: 100%;
    box-sizing: border-box;
}

/* Linha de controles acima da caixa de texto */
.chat-controls-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
    width: 100%;
    flex-wrap: nowrap; /* Sempre lado a lado, sem quebrar linha */
    overflow-x: auto; /* Scroll horizontal se necessário */
}

.control-btn-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 44px; /* Tamanho mínimo para área de toque no mobile (44px recomendado) */
    min-height: 44px;
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    margin: 0; /* Sem margens extras */
}

/* Botão Play/Pause */
#playPauseButtonContainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* Botão de Controle de Velocidade (substitui o dropdown) */
.speed-control-btn,
#speedControl {
    min-width: 44px;
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Garantir que NUNCA apareça um select/dropdown */
#speedControlContainer select,
#speedControlContainer option {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.speed-control-btn:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

.speed-control-btn:active {
    transform: scale(0.95);
}

/* Controle de Velocidade */
#speedControlContainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* Botão de microfone */
#voiceButtonContainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
}

/* Botão enviar - mesmo tamanho e formato dos outros botões */
.input-send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Garantir que botão enviar sempre seja visível */
#sendBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Garantir que todos os botões dentro do input sejam sempre visíveis */
#voiceButtonContainer #voiceBtn,
#voiceButtonContainer .btn-voice {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#playPauseButtonContainer #playPauseBtn,
#playPauseButtonContainer .audio-play-pause-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#speedControlContainer #speedControl,
#speedControlContainer .speed-control-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.input-send-btn:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

.input-send-btn:active {
    transform: scale(0.95);
}

.input-send-btn svg {
    width: 18px;
    height: 18px;
    color: white;
}

.input-send-btn .send-text {
    display: none;
}

.chat-input:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chat-input::placeholder {
    color: #9ca3af;
}

.btn-voice {
    min-width: 44px;
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-voice:hover:not(.recording) {
    background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-voice.recording {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    animation: pulse-voice-recording 1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    transform: scale(1);
}

/* Animação de pulso mais visível para indicar que está ouvindo */
@keyframes pulse-voice-recording {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }
}

/* Animação de pulso para indicar que REPI terminou de falar (diferente de recording) */
.btn-voice.pulsing {
    animation: pulse-ready-to-speak 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    /* CRÍTICO: Garantir que o botão é clicável mesmo quando pulsando */
    pointer-events: auto !important;
    cursor: pointer !important;
}

@keyframes pulse-ready-to-speak {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
}

/* Garantir que recording tem prioridade sobre pulsing */
.btn-voice.recording.pulsing {
    animation: pulse-voice-recording 1s ease-in-out infinite;
}

.btn-voice:hover:not(.recording) {
    transform: scale(1.05);
}

.btn-voice:active {
    transform: scale(0.95);
}

/* Animação de pulso suave (mantida para compatibilidade) */
@keyframes pulse-voice {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Controles de Áudio */
.audio-controls {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.audio-control-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
}

/* Botão de velocidade - estilo do botão circular (não mais select) */
#speedControl {
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Containers dos controles de áudio - na mesma linha, separados */
#playPauseButtonContainer,
#stopButtonContainer,
#speedControlContainer {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    order: 1;
}

#playPauseButtonContainer {
    order: 1;
}

#stopButtonContainer {
    order: 2;
}

#speedControlContainer {
    order: 3;
}

/* Botões agora estão dentro do campo de texto, não precisam mais de ordem separada */

/* Animação de pulso para botão Play quando autoplay falha */
.audio-play-pause-btn.play-pulsing {
    animation: pulse-play-button 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
}

@keyframes pulse-play-button {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(147, 51, 234, 0);
    }
}

.voice-status {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #666;
    display: none;
}

.voice-status.active {
    display: block;
}

.accessibility-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

.typing-indicator {
    display: none;
    padding: 15px;
    background: #f3f4f6;
    border-radius: 15px;
    max-width: 70%;
    border-bottom-left-radius: 5px;
}

.typing-indicator.active {
    display: flex;
    gap: 5px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}

.instructions-panel {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.instructions-panel h3 {
    margin: 0 0 10px 0;
    color: #1e40af;
}

.instructions-panel ul {
    margin: 0;
    padding-left: 20px;
}

.instructions-panel li {
    margin: 5px 0;
    color: #1e40af;
}

/* ==========================================================
   📋 REPI Summary Panel
   ========================================================== */

.repi-summary-panel {
    background: #f0fdf4;
    border: 2px solid #10b981;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.repi-summary-panel h3 {
    margin: 0 0 15px 0;
    color: #065f46;
}

.summary-content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.summary-item {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item strong {
    color: #065f46;
    display: inline-block;
    min-width: 180px;
}

.summary-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-xavier {
    font-size: 18px;
    padding: 15px 30px;
    font-weight: bold;
}

.btn-xavier.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.voice-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

/* ==========================================================
   🧭 REPI Navigation
   ========================================================== */

.repi-navigation {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-header {
    text-align: center;
    margin-bottom: 20px;
}

.nav-header h4 {
    margin: 0 0 5px 0;
    color: #1f2937;
}

.nav-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.nav-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.nav-option {
    padding: 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    text-align: center;
}

.nav-option:hover {
    border-color: #667eea;
    background: #f3f4f6;
    transform: translateY(-2px);
}

.nav-option.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: bold;
}

/* ==========================================================
   📱 Estilos Responsivos para Mobile
   ========================================================== */

@media (max-width: 768px) {
    /* Header mobile - ajustar altura */
    .chat-header {
        padding: 12px 15px;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .chat-header h1 {
        font-size: 20px;
    }

    .chat-header p {
        font-size: 12px !important;
        margin: 3px 0 0 0 !important;
    }

    .chat-header-actions .btn {
        padding: 8px 12px;
        font-size: 14px;
        margin: 0;
    }

    /* Chat Container - adicionar espaço para barra fixa */
    .chat-container {
        padding: 12px;
        padding-bottom: 90px; /* Espaço para barra fixa (uma linha) */
        max-width: 100%;
    }

    /* Mensagens do Chat - melhor espaçamento no mobile */
    .chat-messages {
        padding: 15px;
        margin-bottom: 15px;
        max-height: calc(100vh - 280px);
        min-height: 150px;
    }

    /* Conteúdo da Mensagem - melhor largura no mobile */
    .message-content {
        max-width: 85%;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* Container de Input - fixo na parte inferior, tudo na mesma linha */
    .chat-input-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 8px 12px; /* Padding horizontal para dar espaço */
        gap: 8px; /* Espaçamento adequado entre elementos */
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 100;
        box-sizing: border-box;
        display: flex;
        flex-direction: column; /* Coluna para ter controles acima e input abaixo */
        align-items: stretch;
        background: white;
        overflow: visible;
    }

    /* Linha de controles - sempre visível e bem espaçada - LADO A LADO */
    .chat-controls-row {
        order: 1; /* Primeiro, antes do input */
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* SEMPRE horizontal */
        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important; /* Espaçamento entre botões aumentado para evitar toques acidentais */
        padding: 6px 0 !important;
        flex-wrap: nowrap !important; /* NUNCA quebrar linha */
        overflow-x: auto !important; /* Scroll horizontal se necessário */
        margin-bottom: 6px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Garantir que filhos diretos da linha de controles fiquem lado a lado */
    .chat-controls-row > * {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    /* Containers dos controles de áudio - ordem sequencial, tamanhos fixos (iguais ao desktop) */
    #playPauseButtonContainer {
        order: 1;
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    
    #stopButtonContainer {
        order: 2;
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    
    #speedControlContainer {
        order: 3;
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    
    /* Campo de texto no meio - ocupa TODO espaço restante disponível */
    .chat-input-wrapper {
        flex: 1 1 auto;
        min-width: 0; /* Permitir encolher abaixo do mínimo se necessário */
        max-width: 100%;
        width: 100%;
        gap: 0;
        order: 2; /* Depois dos controles */
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: visible; /* Permitir que botões sejam visíveis */
    }
    
    /* Wrapper interno do input com botões dentro */
    .chat-input-inner-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    /* Botões NÃO estão mais dentro do campo de texto - estão na linha de controles acima */
    /* Remover posicionamento absoluto - botões ficam na linha de controles */
    .input-button-container {
        display: none !important; /* Não usado mais - botões estão na linha de controles */
    }
    
    /* Botão enviar está na linha de controles, não dentro do input - MOBILE */
    .input-send-btn {
        position: relative !important; /* Não usar absolute */
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 1;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    .input-send-btn:hover {
        background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        transform: scale(1.05) !important;
    }
    
    .input-send-btn:active {
        transform: scale(0.95) !important;
    }
    
    .input-send-btn svg {
        width: 18px;
        height: 18px;
        color: white;
    }
    
    .input-send-btn .send-text {
        display: none;
    }

    /* Linha de controles acima da caixa de texto - mobile (IGUAL AO DESKTOP) - LADO A LADO */
    .chat-controls-row {
        display: flex !important;
        flex-direction: row !important; /* SEMPRE horizontal - botões lado a lado */
        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important; /* Espaçamento aumentado para evitar toques acidentais */
        padding: 6px 0 !important;
        flex-wrap: nowrap !important; /* NUNCA quebrar linha - manter lado a lado */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important; /* Scroll horizontal se necessário */
        box-sizing: border-box !important;
    }
    
    /* Garantir que todos os filhos da linha de controles fiquem lado a lado */
    .chat-controls-row > * {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    .control-btn-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important; /* Não encolher */
        flex-grow: 0 !important; /* Não crescer */
        min-width: 44px !important; /* Tamanho mínimo recomendado para área de toque */
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        margin: 0 !important; /* Sem margens extras */
    }
    
    #playPauseButtonContainer {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    #speedControlContainer {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    #voiceButtonContainer {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    .input-send-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 !important;
    }
    
    /* Botão de velocidade - mobile (GARANTIR que é botão circular, nunca select) - IGUAL AO DESKTOP */
    .speed-control-btn,
    #speedControl {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        font-size: 12px !important; /* Mesmo tamanho do desktop */
        font-weight: 600 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Garantir que NUNCA apareça um select/dropdown */
    #speedControlContainer select,
    #speedControlContainer option,
    #speedControlContainer > select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Garantir que apenas o botão seja renderizado */
    #speedControlContainer > button,
    #speedControlContainer > #speedControl {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Botão de voz - mobile */
    .btn-voice {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Input de Texto - otimizado para mobile, visível e bem dimensionado */
    .chat-input {
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 24px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        border: 2px solid #e5e7eb;
        background: #f9fafb;
        display: block;
        position: relative;
        z-index: 1;
    }
    
    .chat-input:focus {
        border-color: #667eea;
        background: white;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* Botão de Voz - dentro do campo de texto */
    .btn-voice {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        flex-shrink: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 50%;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-voice:hover {
        background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    /* Botão Enviar agora está dentro do campo de texto - estilos já definidos acima */

    /* Painel de Instruções - espaçamento mobile */
    .instructions-panel {
        padding: 12px;
        margin-bottom: 15px;
        font-size: 14px;
    }

    .instructions-panel h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    /* Navegação REPI - grid mobile */
    .repi-navigation {
        padding: 15px;
        margin-bottom: 15px;
    }

    .nav-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .nav-option {
        padding: 12px;
        font-size: 14px;
    }

    /* Painel de Resumo - espaçamento mobile */
    .repi-summary-panel {
        padding: 15px;
        margin-bottom: 15px;
    }

    .summary-item strong {
        min-width: 120px;
        font-size: 14px;
    }

    /* Autor da Mensagem - menor no mobile */
    .message-author {
        font-size: 11px;
    }

    /* Controles de Áudio - botões separados na mesma linha, sempre visíveis e bem posicionados (IGUAL AO DESKTOP) */
    #playPauseButtonContainer,
    #stopButtonContainer {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
    }

    #speedControlContainer {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
    }

    /* Estilos dos botões de áudio - garantir tamanho consistente e sem sobreposição (IGUAL AO DESKTOP) */
    .audio-play-pause-btn {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    #playPauseButtonContainer .audio-play-pause-btn {
        width: 100% !important;
        height: 100% !important;
    }

    /* Botão de velocidade (IGUAL AO DESKTOP - sempre botão circular, nunca select) */
    .speed-control-btn,
    #speedControl {
        font-size: 12px !important; /* Mesmo tamanho do desktop */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 2 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* Garantir que apenas botões sejam renderizados no container */
    #speedControlContainer > button,
    #speedControlContainer > #speedControl {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
    }
    
    /* Garantir que select NUNCA apareça */
    #speedControlContainer > select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Esconder label de velocidade no mobile */
    #speedControlContainer .speed-label {
        display: none;
    }
    
    /* Garantir que elementos dentro dos containers não criem sobreposição */
    #playPauseButtonContainer > * {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }
    
    #speedControlContainer > * {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Dispositivos muito pequenos (telefones em retrato) */
@media (max-width: 480px) {
    .chat-header {
        padding: 10px 12px;
    }

    .chat-header h1 {
        font-size: 18px;
    }

    .chat-header p {
        font-size: 11px !important;
    }

    .chat-container {
        padding: 8px;
        padding-bottom: 85px; /* Menos espaço em telas muito pequenas */
    }

    /* Controles de Áudio - ajustes para telas muito pequenas */
    .audio-play-pause-btn,
    .audio-stop-btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
    }

    /* Botão de velocidade - mobile (botão circular, não select) - IGUAL AO DESKTOP */
    #speedControl {
        font-size: 12px; /* Mesmo tamanho do desktop */
        font-weight: 600;
        padding: 0;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Garantir que select NUNCA apareça em telas muito pequenas */
    #speedControlContainer select,
    #speedControlContainer option {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Botões dentro do campo de texto já estão ajustados acima */
    
    .chat-input-container {
        padding: 8px 10px; /* Padding horizontal adequado */
        gap: 8px; /* Espaçamento entre elementos */
        display: flex !important;
        flex-direction: column !important; /* Controles acima, input abaixo */
    }
    
    /* Linha de controles em telas muito pequenas - LADO A LADO */
    .chat-controls-row {
        display: flex !important;
        flex-direction: row !important; /* SEMPRE horizontal */
        flex-wrap: nowrap !important; /* NUNCA quebrar */
        gap: 20px !important; /* Espaçamento aumentado para evitar toques acidentais */
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    .chat-input {
        padding: 12px 16px; /* Padding adequado */
        font-size: 15px;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Em telas muito pequenas, botões continuam lado a lado na linha de controles */
    .chat-controls-row {
        gap: 18px !important; /* Espaçamento aumentado para evitar toques acidentais */
    }
    
    /* Garantir que todos os botões sejam visíveis e lado a lado - SEM posicionamento absoluto */
    #playPauseButtonContainer,
    #speedControlContainer,
    #voiceButtonContainer,
    .input-send-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        position: relative !important; /* Não usar absolute */
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important; /* Sem transformações de posicionamento */
    }
    
    .chat-input-wrapper {
        width: 100% !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
    }
    
    /* Garantir que todos os containers sejam visíveis e tenham tamanhos fixos */
    #playPauseButtonContainer,
    #stopButtonContainer {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #speedControlContainer {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garantir que botão de velocidade seja sempre botão circular */
    #speedControlContainer #speedControl,
    #speedControlContainer .speed-control-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 12px !important;
        border-radius: 50% !important;
        display: flex !important;
    }
    
    /* Garantir que select NUNCA apareça */
    #speedControlContainer select {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Já ajustado acima */
    
    .chat-messages {
        padding: 12px;
        max-height: calc(100vh - 250px); /* Ajustado para barra fixa */
    }

    .message-content {
        max-width: 90%;
        padding: 10px 14px;
        font-size: 15px;
    }
}

/* Orientação paisagem no mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .chat-header {
        padding: 8px 12px;
    }

    .chat-messages {
        max-height: calc(100vh - 200px); /* Ajustado para barra fixa em paisagem */
    }

    .chat-input-container {
        padding: 8px;
    }
    
    .chat-container {
        padding-bottom: 80px; /* Menos espaço em paisagem */
    }
}