/* Ajustes finais para garantir uma aparência moderna e compacta */

/* Sobrescrever qualquer estilo antigo que possa estar interferindo */
* {
    box-sizing: border-box !important;
}

/* Garantir que o body tenha o novo background */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
}

/* Forçar header moderno */
#header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 12px 24px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    height: 75px !important; /* Altura fixa para o cabeçalho */
    display: flex !important;
    align-items: center !important;
}

/* Criar a "moldura" para o logo */
#logo-container {
    width: 55px !important; /* Largura da moldura */
    height: 55px !important; /* Altura da moldura */
    overflow: hidden !important; /* Esconde o que transbordar da imagem */
    border-radius: 50% !important; /* Deixa a moldura redonda */
    position: relative !important;
    flex-shrink: 0 !important; /* Impede que o container encolha */
}

/* Aplicar o "zoom" na imagem e centralizá-la */
#logo-container img {
    height: 200% !important; /* Aumenta a imagem (zoom) */
    width: auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Centraliza a imagem na moldura */
}

/* Forçar tamanho dos botões do header */
.header-buttons button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

/* Garantir que as seções principais sejam modernas */
#input-section,
#output-section {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    min-height: 450px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Textarea moderno */
#user-input {
    border: 2px solid #e1e8ed !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-size: 14px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    min-height: 320px !important;
    resize: none !important;
    font-family: inherit !important;
    flex: 1 !important;
}

#user-input:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline: none !important;
}

/* Botões principais modernos e compactos */
button {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    min-width: 150px !important;
}

/* Cores específicas dos botões */
#audio-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white !important;
}

#send-btn {
    background: #27ae60 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid #27ae60 !important;
}

#import-image-btn {
    background: #ffffff !important;
    color: #1b689e !important;
    border: 1px solid #1b689e !important;
}

#new-consultation-btn {
    background: #ffffff !important;
    color: #1b689e !important;
    border: 1px solid #1b689e !important;
}

#forensic-ai-btn {
    background: #ffffff !important;
    color: #1b689e !important;
    border: 1px solid #1b689e !important;
}

#export-btn {
    display: none !important;
}

/* Ocultar completamente o container dos botões de exportação */
#new-buttons-container {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    visibility: hidden !important;
}

/* Hover effect para todos os botões */
button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

button:active {
    transform: translateY(0) !important;
}

/* Hover específico para botão "Enviar à IA" */
#send-btn:hover {
    background: #2ecc71 !important;
    color: #ffffff !important;
    border-color: #2ecc71 !important;
}

/* Hover específico para outros botões azuis */
#import-image-btn:hover,
#new-consultation-btn:hover,
#forensic-ai-btn:hover {
    background: #1b689e !important;
    color: #ffffff !important;
    border-color: #1b689e !important;
}

/* Grid dos botões mais compacto */
#button-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

/* Área de mensagens moderna */
#messages {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    border: 1px solid #e1e8ed !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Garantir que todos os elementos dentro das mensagens tenham fundo transparente */
#messages *,
#messages div,
#messages p,
#messages span,
#output-section *,
#output-section div,
#output-section p,
#output-section span {
    background: transparent !important;
    background-color: transparent !important;
}

/* Garantir que todo o conteúdo da seção de resposta seja compacto e use todo o espaço */
#output-section {
    font-size: 14px !important;
    line-height: 1.5 !important;
    height: 100% !important;
}

/* Garantir que a seção de entrada também use todo o espaço */
#input-section {
    height: 100% !important;
}

/* Garantir que as mensagens bot sejam compactas */
#output-section .bot,
#output-section .message.bot,
.message.bot {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: inherit !important;
    background: transparent !important;
}

/* Garantir que todos os elementos de texto na seção de resposta sejam compactos */
#output-section p,
#output-section div,
#output-section span {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Container principal em grid */
#main-container {
    display: grid !important;
    grid-template-columns: 0.65fr 1.35fr !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: calc(100vh - 90px) !important;
    min-height: 600px !important;
}

/* Instruções link pequeno */
#instructions-link {
    font-size: 12px !important;
    color: #7f8c8d !important;
    margin: 8px 0 !important;
    text-align: right !important;
}

/* Disclaimer compacto */
.disclaimer {
    background: #ffffff !important;
    padding: 12px 20px !important;
    font-size: 12px !important;
    color: #7f8c8d !important;
    text-align: center !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Painel lateral moderno - APARECE POR PADRÃO */
#consultation-history-panel {
    background: #ffffff !important;
    backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1) !important;
    
    /* MUDANÇAS: Painel visível por padrão e mais estreito */
    width: 300px !important;
    transform: translateX(0) !important;
    transition: transform 0.3s ease, width 0.3s ease !important;
    padding-top: 20px !important; /* Reduz drasticamente o espaço no topo */
}

/* INVERTER COMPORTAMENTO: Quando tem classe panel-open, o painel ESCONDE */
#consultation-history-panel.panel-open {
    transform: translateX(-100%) !important;
}

/* Ajustar "orelhinha" - COR AZUL e posição para painel oculto */
#panel-handle {
    background-color: #1b689e !important;
    border-radius: 0 12px 12px 0 !important;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    top: 85px !important; /* Sobe a orelhinha para acompanhar o conteúdo */
}

#panel-handle:hover {
    background-color: #2a80c2 !important; /* Tom de azul um pouco mais claro para o hover */
    transform: scale(1.05) !important;
}

/* INVERTER ROTAÇÃO DO ÍCONE: 180deg quando painel visível, normal quando oculto */
#panel-handle i {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease !important;
}

#consultation-history-panel.panel-open #panel-handle i {
    transform: rotate(0deg) !important;
}

/* AJUSTAR LAYOUT PRINCIPAL - Abordagem com classes CSS */
body {
    padding-left: 300px !important;
    transition: padding-left 0.3s ease !important;
}

/* Quando painel estiver oculto (classe panel-hidden), remover padding */
body.panel-hidden {
    padding-left: 0 !important;
}

/* Garantir que a transição funcione em ambos os estados */
body:not(.panel-hidden) {
    padding-left: 300px !important;
}

/* Garantir que o main-container se ajuste corretamente */
#main-container {
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 0.65fr 1.35fr !important;
    gap: 20px !important;
    padding: 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    height: calc(100vh - 90px) !important;
    min-height: 600px !important;
}



/* Ajustar header também */
#header {
    padding-left: 300px !important;
    transition: padding-left 0.3s ease !important;
}

body.panel-hidden #header {
    padding-left: 0 !important;
}

/* Ajustar disclaimer */
.disclaimer {
    padding-left: 300px !important;
    transition: padding-left 0.3s ease !important;
}

body.panel-hidden .disclaimer {
    padding-left: 0 !important;
}

/* RESPONSIVIDADE: Em telas menores, comportamento normal (overlay) */
@media (max-width: 1024px) {
    /* Resetar comportamento para mobile/tablet */
    body,
    body.panel-hidden,
    body:not(.panel-hidden) {
        padding-left: 0 !important;
    }
    
    #header,
    body.panel-hidden #header {
        padding-left: 0 !important;
    }
    
    .disclaimer,
    body.panel-hidden .disclaimer {
        padding-left: 0 !important;
    }
    
    /* Painel como overlay em mobile - sempre oculto por padrão */
    #consultation-history-panel {
        width: 280px !important;
        transform: translateX(-100%) !important;
        z-index: 1002 !important;
        display: flex !important;
    }
    
    /* Quando o painel estiver aberto no mobile */
    #consultation-history-panel.panel-open {
        transform: translateX(0) !important;
    }
    
    /* === INÍCIO DAS NOVAS REGRAS PARA CABEÇALHO MOBILE === */
    #header {
        padding: 16px !important;
        height: auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important; /* Reduz o espaço entre logo e user-info */
    }

    #header .header-top-row {
        justify-content: center !important;
        width: 100% !important;
    }

    #user-details-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 4px !important; /* Reduz o espaço */
    }

    #username, #user-credits {
        font-size: 14px !important;
        margin: 0 !important;
    }

    #user-credits {
        font-size: 12px !important;
        color: #5a6c7d !important;
    }

    #header #user-info {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important; /* Remove o gap para controlar espaçamento com margens */
        border-top: none !important; /* Remove a linha indesejada */
        padding-top: 0 !important; /* Remove o padding que cria espaço */
    }

    #user-details-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        margin-bottom: 8px !important; /* Controla o espaço até os botões */
    }
    
    #logo-container {
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        overflow: visible !important;
        position: static !important;
        margin-bottom: 0px !important; /* Remove completamente o espaço abaixo do logo */
    }

    #logo-container img {
        height: 90px !important; /* Logo maior */
        width: auto !important;
        position: static !important;
        transform: none !important;
    }

    /* Garante que os botões do header fiquem lado a lado e centralizados */
    .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        width: auto !important; /* Container se ajusta ao tamanho dos botões */
        gap: 8px !important;
    }

    /* Regra ultra-específica para forçar os botões a ficarem lado a lado */
    #header #user-info .header-buttons button {
        min-width: auto !important;
        flex: 0 1 auto !important; /* Impede que os botões cresçam para preencher */
        padding: 8px 16px !important; /* Padding horizontal maior para visual melhor */
        white-space: nowrap;
    }
    /* === FIM DAS NOVAS REGRAS === */

    /* Esconder apenas a orelhinha em mobile, mas mostrar o botão de histórico */
    #panel-handle {
        display: none !important;
    }
    
    /* Mostrar botão de histórico em mobile */
    #history-toggle-btn-mobile {
        display: block !important;
    }
}

/* COMPORTAMENTO ESPECÍFICO PARA DESKTOP */
@media (min-width: 1025px) {
    /* Garantir que o painel seja visível por padrão apenas em desktop */
    #consultation-history-panel {
        display: flex !important;
    }
    
    /* Esconder botão mobile de histórico em desktop */
    #history-toggle-btn-mobile {
        display: none !important;
    }
    
    /* Quando painel estiver oculto em desktop, centralizar o conteúdo */
    body.panel-hidden #main-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 20px 40px !important;
        justify-content: center !important;
    }
}

/* MELHORIAS VISUAIS DO PAINEL DE HISTÓRICO */
#datetime-container {
    padding: 10px 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e1e8ed;
    text-align: center;
}

#datetime-container .date {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #5a6c7d !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#datetime-container .time {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin: 4px 0 0 0 !important;
    line-height: 1 !important;
}


#consultation-history-panel .panel-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

#consultation-history-panel .panel-content h3 {
    color: #1b689e !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #1b689e !important;
}

#consultation-list li a {
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 10.5px !important;
    transition: all 0.2s ease !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

#consultation-list li a:hover {
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3) !important;
}

/* Estilos para botões de exclusão das consultas */
.delete-consultation-btn {
    background: #f0f2f5 !important; /* Fundo cinza claro e neutro */
    color: #909ea8 !important;      /* Ícone de lixeira em cinza suave */
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    transition: all 0.2s ease !important; /* Transição para todas as propriedades */
    flex-shrink: 0 !important;
}

.delete-consultation-btn:hover {
    background: #e74c3c !important; /* Fundo vermelho apenas no hover */
    color: white !important;        /* Ícone branco para contraste */
    transform: scale(1.1) !important; /* Aumenta um pouco mais para dar feedback */
}

.delete-consultation-btn:active {
    transform: scale(0.95) !important;
}

/* Ajustar layout dos itens da lista de consultas */
#consultation-list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

#consultation-list li a {
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

/* Garantir que todos os modais sejam modernos */
.modal-options {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
}

.modal-content {
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    max-width: 400px !important;
    width: 90% !important;
    animation: modalAppear 0.3s ease !important;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.modal-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%) !important;
}

.modal-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
    position: relative !important;
    z-index: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.modal-body {
    padding: 24px !important;
    background: #fafbfc !important;
}

.modal-button {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    color: #2c3e50 !important;
}

.modal-button:hover {
    background: linear-gradient(135deg, #f1f3f4, #e8eaed) !important;
    border-color: #3498db !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15) !important;
}

.modal-button .option-icon {
    font-size: 20px !important;
    margin-right: 14px !important;
    width: 24px !important;
    text-align: center !important;
    opacity: 0.8 !important;
}

.modal-button .option-text {
    font-weight: 500 !important;
    color: #2c3e50 !important;
    letter-spacing: 0.2px !important;
}

.modal-button:hover .option-icon {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

.modal-button.close-btn {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
    color: white !important;
    margin-top: 16px !important;
    justify-content: center !important;
    text-align: center !important;
    border: none !important;
}

.modal-button.close-btn:hover {
    background: linear-gradient(135deg, #7f8c8d, #6c7b7d) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(127, 140, 141, 0.3) !important;
}

.modal-button.close-btn .option-text {
    color: white !important;
    font-weight: 600 !important;
}

/* Estilos específicos para o modal de importação de exames */
#capture-options .modal-header {
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
}

#capture-options .modal-button {
    justify-content: flex-start !important;
    padding-left: 20px !important;
}

#capture-options .option-text {
    text-align: left !important;
    padding-left: 0 !important;
}

#capture-options .option-icon {
    margin-right: 16px !important;
    min-width: 24px !important;
}

/* Ícones coloridos para cada opção */
#camera-btn .option-icon {
    color: #e74c3c !important;
}

#file-btn .option-icon {
    color: #f39c12 !important;
}

#pdf-btn .option-icon {
    color: #9b59b6 !important;
}

/* Garantir visibilidade do modal e efeitos suaves */
.modal-options[style*="display: flex"] {
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-options[style*="display: none"] {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Efeito de clique nos botões do modal */
.modal-button:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Sombra mais suave no modal */
.modal-content {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 
                0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Melhorar o contraste do texto */
.modal-button .option-text {
    text-shadow: none !important;
    font-family: inherit !important;
}

/* Garantir que o backdrop blur funcione */
.modal-options {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Scrollbar personalizada para toda a página */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1 !important;
}

/* Responsividade aprimorada */
@media (max-width: 768px) {
    /* Garantir layout mobile correto independente do estado do painel */
    #main-container,
    body.panel-hidden #main-container,
    body:not(.panel-hidden) #main-container {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 16px !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        justify-content: stretch !important;
        display: grid !important;
    }
    
    /* Aumentar apenas a seção de resposta no mobile */
    #output-section {
        min-height: 70vh !important;
    }
    
    /* REGRAS DE HEADER REMOVIDAS DAQUI E MOVIDAS PARA O BREAKPOINT DE 1024px */
    
    #button-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .header-buttons {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .header-buttons button {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 13px !important;
    }
    
    #button-container {
        grid-template-columns: 1fr !important;
    }
    
    #input-section, 
    #output-section {
        padding: 16px !important;
        border-radius: 10px !important;
    }
    
    /* Aumentar ainda mais a área de resposta em telas pequenas */
    #output-section {
        min-height: 75vh !important;
    }
    
    /* Modal responsivo para mobile */
    .modal-content {
        max-width: 350px !important;
        width: 95% !important;
        margin: 20px !important;
    }
    
    .modal-header {
        padding: 16px !important;
    }
    
    .modal-header h3 {
        font-size: 16px !important;
    }
    
    .modal-body {
        padding: 20px !important;
    }
    
    .modal-button {
        padding: 14px 16px !important;
        font-size: 13px !important;
    }
    
    .modal-button .option-icon {
        font-size: 18px !important;
        margin-right: 12px !important;
    }
}

/* Garantir que loading containers sejam modernos quando ativos - PRIORIDADE MÁXIMA */
#loading-container[style*="display: flex"],
#audio-loading-container[style*="display: flex"],
#image-loading-container[style*="display: flex"],
#loading-container[style*="display:flex"],
#audio-loading-container[style*="display:flex"],
#image-loading-container[style*="display:flex"],
#loading-container[style*="display: block"],
#audio-loading-container[style*="display: block"],
#image-loading-container[style*="display: block"],
#loading-container[style*="display:block"],
#audio-loading-container[style*="display:block"],
#image-loading-container[style*="display:block"] {
    background: #ffffff !important;
    backdrop-filter: blur(10px) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1001 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: inherit !important;
}

/* Containers ocultos por padrão APENAS quando explicitamente ocultos */
#loading-container[style*="display: none"],
#audio-loading-container[style*="display: none"],
#image-loading-container[style*="display: none"],
#loading-container[style*="display:none"],
#audio-loading-container[style*="display:none"],
#image-loading-container[style*="display:none"] {
    display: none !important;
}



#loading-text,
#audio-loading-text,
#image-loading-text {
    margin-left: 12px !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #f3f3f3 !important;
    border-top: 3px solid #3498db !important;
    border-radius: 50% !important;
    margin: 0 !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Garantir que todos os elementos com animação de spin funcionem */
[style*="animation: spin"],
[style*="animation:spin"] {
    animation: spin 1s linear infinite !important;
}

/* Garantir animação para spinners inline criados dinamicamente */
.minimal-spinner {
    animation: minimalSpin 1s linear infinite !important;
}

@keyframes minimalSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Garantir que loaders também girem */
.loader {
    width: 20px !important;
    height: 20px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top: 3px solid white !important;
    animation: spin 1s linear infinite !important;
    margin: 0 !important;
}

/* Animação do botão de gravação */
@keyframes pulseButton {
    0% { 
        transform: scale(1) !important; 
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4) !important; 
    }
    70% { 
        transform: scale(1.02) !important; 
        box-shadow: 0 0 0 8px rgba(231, 76, 60, 0) !important; 
    }
    100% { 
        transform: scale(1) !important; 
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0) !important; 
    }
}

.recording-pulse {
    animation: pulseButton 1.5s infinite !important;
}

/* Garantir que imagem preview seja moderna */
#image-preview-container {
    background: rgba(248, 249, 250, 0.9) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 12px !important;
    border: 1px solid #e1e8ed !important;
}

#image-preview {
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#image-options {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

#image-options button {
    flex: 1 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
}

/* Forçar texto do username a ser menor */
#username {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #5a6c7d !important;
    margin: 0 !important;
}

/* Garantir que título do header seja compacto */
#header-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

/* Remover qualquer padding/margin excessivo de elementos */
.header-top-row {
    margin-bottom: 8px !important;
}

#user-info {
    font-size: 13px !important;
}

/* Garantir que o botão de histórico mobile seja discreto e elegante */
#history-toggle-btn-mobile {
    padding: 8px 10px !important;
    font-size: 16px !important;
    background: rgba(39, 174, 96, 0.1) !important;
    border: 1px solid rgba(39, 174, 96, 0.3) !important;
    color: #27ae60 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.15) !important;
}

#history-toggle-btn-mobile:hover {
    background: rgba(39, 174, 96, 0.2) !important;
    border-color: #27ae60 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25) !important;
}

#history-toggle-btn-mobile:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.2) !important;
}

/* Ajustes para elementos que possam ter escapado */
.option-icon {
    font-size: 20px !important;
    margin-right: 12px !important;
    width: 24px !important;
}

.option-text {
    font-weight: 500 !important;
    font-size: 14px !important;
} 

/* Garantir que listas e elementos específicos na resposta sejam compactos */
#output-section ul,
#output-section ol,
#output-section li {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Garantir que headers na resposta sejam proporcionais */
#output-section h1,
#output-section h2,
#output-section h3,
#output-section h4,
#output-section h5,
#output-section h6 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    margin-top: 16px !important;
}

/* Garantir que código na resposta seja compacto */
#output-section code,
#output-section pre {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Garantir que qualquer texto na resposta seja consistente */
#output-section * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* FORÇAR eliminação total do espaço embaixo - MÁXIMA PRIORIDADE */
#output-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#messages {
    margin-bottom: 0 !important;
    padding-bottom: 16px !important;
    height: calc(100% - 32px) !important;
    max-height: calc(100% - 32px) !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    overflow-y: auto !important;
}

/* Garantir que não há margem em elementos internos da seção de resposta */
#output-section > *:last-child {
    margin-bottom: 0 !important;
}

/* Forçar altura total para elementos flexíveis */
#main-container {
    overflow: hidden !important;
}

#input-section,
#output-section {
    overflow: hidden !important;
    max-height: 100% !important;
}

/* Garantir que o #messages seja o único elemento a ocupar espaço */
#output-section > *:not(#messages) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Força o #messages a ocupar 100% do espaço disponível */
#messages:only-child,
#messages {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* REGRA FINAL - SOBRESCREVER TUDO */
html body #output-section {
    position: relative !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

html body #output-section #messages {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e1e8ed !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}