/* Este é o style.css completo. */
/* MUDANÇAS v1.0.9: 
    1. Aumenta o tamanho do avatar para 72px.
    2. Reposiciona o Arvoreco do Mapa (Avatar à esquerda, Balão à direita).
    3. Posição do Arvoreco na Câmera "mais para dentro" (left: 32px).
    4. Adiciona max-width ao balão do mapa para não encostar no botão.
    5. Garante que o Arvoreco do mapa não seja "espremido" (flex-shrink: 0).
*/
:root {
    --verde-principal: #2E7D32;
    --verde-claro: #81C784;
    --branco: #FFFFFF;
    --cinza: #F5F5F5;
    --sucesso: #4CAF50;
    --alerta: #FFD700;
    --erro: #F44336;
    font-family: 'Inter', sans-serif;
    --app-height: 100vh;
}

html, body {
    height: 100vh;
    height: var(--app-height);
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

main {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

nav {
    flex-shrink: 0;
}

.font-logo { font-family: 'Merienda', cursive; }
.bg-verde-principal { background-color: var(--verde-principal); }
.text-verde-principal { color: var(--verde-principal); }
.border-verde-principal { border-color: var(--verde-principal); }
.bg-verde-claro { background-color: var(--verde-claro); }
.bg-sucesso { background-color: var(--sucesso); }
.bg-alerta { background-color: var(--alerta); }
.text-alerta { color: #c8a900; }
.bg-erro { background-color: var(--erro); }
.text-erro { color: var(--erro); }
.transition-all { transition: all 0.3s ease-in-out; }

.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bg-progress-gradient {
    background-image: linear-gradient(to right, var(--verde-claro), var(--verde-principal));
}

.camera-viewfinder {
    width: 100%; padding-top: 100%; position: relative; background: #000;
    border-radius: 24px; overflow: hidden; border: 4px solid var(--cinza);
}
.camera-viewfinder-content {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center; flex-direction: column; color: white;
}
input[type="file"] { display: none; }


.arvoreco-avatar {
    position: relative; /* Posição relativa para o Arvoreco do Mapa */
    z-index: 1001;
    display: flex;
    align-items: flex-end;
}

/* Container do Arvoreco do Mapa (dentro da barra inferior) */
#arvoreco-mapa {
    flex-direction: row; /* Avatar à esquerda, Balão à direita */
    flex-shrink: 0; /* NÃO deixa o Arvoreco ser espremido */
}
#arvoreco-mapa .avatar-img {
    animation: bounceAvatar 2s ease-in-out infinite;
}

/* Container do Arvoreco da Câmera (continua absolute) */
#arvoreco-camera {
    position: absolute;
    top: 70px;
    left: 32px; /* ATUALIZAÇÃO: Movido "para dentro" */
    flex-direction: row; /* Avatar à esquerda, Balão à direita */
}

/* ATUALIZAÇÃO: Avatar aumentado para 72px */
.arvoreco-avatar .avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: contain;
    animation: bounceAvatar 2s ease-in-out infinite;
    flex-shrink: 0; /* Impede que o avatar encolha */
}

.arvoreco-bounce {
    animation: bounceAvatar 2s ease-in-out infinite;
}

@keyframes bounceAvatar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    55% { transform: translateY(0); }
}

.speech-bubble {
    position: relative;
    background: var(--branco);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    max-width: 200px; /* Define um máximo padrão */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: fadeInBubble 0.5s ease-out 0.2s forwards;
    opacity: 0;
}

/* ATUALIZAÇÃO v1.0.9: Garante que o balão do mapa não estique demais */
#arvoreco-mapa .speech-bubble {
    max-width: 170px; /* Reduz de 200px para 170px para não encostar no botão */
    flex-shrink: 1; /* Permite que o balão encolha se necessário */
}


@keyframes fadeInBubble {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.speech-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

/* Seta para o balão da CÂMERA e MAPA (Avatar à esquerda, Seta aponta p/ esquerda) */
.speech-bubble-left {
    margin-left: 10px;
    margin-bottom: 8px;
}
.speech-bubble-left::after {
    border-right-color: var(--branco); /* Seta na direita do balão */
    border-top-color: var(--branco);
    top: 50%;
    left: -8px; /* Posição da seta (para fora, à esquerda) */
    margin-top: -8px;
    transform: rotate(225deg); /* Aponta para a esquerda */
}

/* Seta para o balão do MODAL (Avatar à esquerda, Seta aponta p/ baixo) */
.speech-bubble-bottom-left {
    margin-left: 10px;
    margin-bottom: 8px;
}
.speech-bubble-bottom-left::after {
    border-top-color: var(--branco);
    border-left-color: var(--branco);
    bottom: -8px;
    left: 10px;
    transform: rotate(-45deg);
}