* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Utilitários de Cores */
.verde { color: #246900 !important; }
.preto { color: #000000 !important; }
.vermelho { color: #f22 !important; }
.azul { color: #00008b !important; }
.branco { color: #ffffff !important; }
.amarelo-ilha { color: #ffffe0 !important; }


/* --- Ajustes Globais --- */
body {
    background-color: #0b0e14;
    margin: 0;
    /* O pulo do gato: evitar que o body role, deixando só o chat rolar */
    position: fixed; 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* Garante que o container não transborde */
#container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #30363d;
    background: linear-gradient(to bottom, #161b22, #0b0e14);
}

header h1 { color: #F0E68C; margin: 0; font-size: 1.5rem; }

/* --- Chat Box responsivo --- */
#chat-box {
    flex: 1; /* Ele vai crescer e encolher conforme o teclado aparece */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Rolagem macia no iPhone */
    padding: 15px;
}

.msg { padding: 12px 16px; 
    border-radius: 18px; 
    max-width: 75%; 
    font-size: 1rem; /* Aumentei um pouco para facilitar a leitura no sol */
    line-height: 1.5;
    word-wrap: break-word }
.bot { 
    background-color: #21262d; 
    color: #f0f6fc !important; /* Um branco levemente acinzentado, bem nítido */
    align-self: flex-start; 
}
.user { background-color: #F0E68C; color: #0b0e14; align-self: flex-end; }

/* --- Footer (Onde digita) --- */
footer {
    flex-shrink: 0; /* Impede o footer de ser esmagado */
    padding: 15px;
    background-color: #161b22;
    border-top: 1px solid #30363d;
    /* Margem extra para não ficar colado na borda de baixo do iPhone (Home Indicator) */
    padding-bottom: env(safe-area-inset-bottom, 15px); 
}
#user-input {
    flex: 1;
    background: #0d1117;
    border: 1px solid #30363d;
    color: #e6edf3;
    padding: 12px;
    border-radius: 20px;
    outline: none;
    font-size: 16px; /* Evita o zoom automático do iPhone ao focar */
}

input {
    flex: 1;
    background: #0d1117;
    border: 1px solid #30363d;
    color: white;
    padding: 10px;
    border-radius: 5px;
}


button {
    background-color: #F0E68C;
    border: none;
    height: 40px; /* Define a altura fixa */
    padding: 0 16px; /* Ajustamos o padding vertical para 0 para não conflitar */
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    display: flex; /* Opcional: ajuda a centralizar o texto no meio */
    align-items: center;
}

.msg { 
    padding: 10px 15px; 
    border-radius: 15px; 
    max-width: 69%; 
    word-wrap: break-word; /* Evita que palavras grandes quebrem o layout */
}

/* Botão Flutuante */
/* Garanta que o botão seja FIXO na janela, não no chat */
#btn-termos {
    position: fixed !important; 
    bottom: 69px !important;
    right: 20px !important;
    background-color: #f22; /* Seu vermelho FF2222 */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 9999; /* Garante que fica na frente de TUDO */
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border: 2px solid #30363d;
}

/* Painel Lateral */
#painel-termos {
    position: fixed;
    top: 0;
    right: -320px; /* Começa escondido à direita */
    width: 300px;
    height: 100%;
    background-color: #161b22;
    color: #e6edf3;
    transition: right 0.3s ease-in-out;
    z-index: 10000;
    padding: 25px;
    border-left: 3px solid #f22;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

/* Classe que o JavaScript ativa */
#painel-termos.aberto {
    right: 0 !important;
}

/* --- Media Queries (O "Pulo do Gato") --- */
@media (max-width: 600px) {
    #container {
        border-left: none;
        border-right: none;
    }
    
    header h1 {
        font-size: 1.2rem;
    }

    .msg {
        max-width: 90%; /* Quase a largura toda no celular */
    }

    #btn-termos {
        width: 50px;
        height: 50px;
        bottom: 80px !important; /* Sobe um pouco pra não atrapalhar o input */
    }

    #painel-termos {
        width: 85%; /* Painel quase todo na tela no mobile */
    }
}
O que eu mudei pro