/* ===============================
   🌳 TALKING TREE AVATAR
   =============================== */

#talkingTreeAvatar{

position:fixed;
bottom:30px;
right:30px;

width:110px;
height:110px;

background:#ffffff;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

z-index:9999;

box-shadow:0 10px 35px rgba(0,0,0,0.25);

transition:transform .3s ease, opacity .3s ease;

}

#talkingTreeAvatar:hover{
transform:scale(1.08);
}

/* Tree image */

#treeAvatarImg{

width:85px;
height:85px;

object-fit:contain;

}


/* ===============================
   🌿 SPEAKING ANIMATION
   =============================== */

.tree-speaking{

animation:treePulse 1.1s infinite;

}

@keyframes treePulse{

0%{transform:scale(1)}
50%{transform:scale(1.12)}
100%{transform:scale(1)}

}

/* glowing tree when speaking */

.tree-speaking img{

filter:drop-shadow(0 0 12px #34d399);

}


/* ===============================
   💬 SPEECH BUBBLE
   =============================== */

#treeBubble{

position:absolute;

bottom:120px;
right:0;

background:white;

border-radius:16px;

padding:12px 16px;

max-width:230px;

font-size:13px;
line-height:1.4;

box-shadow:0 6px 20px rgba(0,0,0,0.2);

display:none;

}

/* bubble arrow */

#treeBubble:after{

content:"";

position:absolute;

bottom:-10px;
right:22px;

border-width:10px;
border-style:solid;

border-color:white transparent transparent transparent;

}


/* ===============================
   🎛 CONTROL BUTTONS
   =============================== */

.tree-controls{

position:absolute;

top:-10px;
right:-10px;

background:white;

border-radius:20px;

padding:4px 8px;

box-shadow:0 4px 10px rgba(0,0,0,0.2);

font-size:14px;

display:flex;
align-items:center;

}

#treeMute,
#treeShare,
#treeClose{

cursor:pointer;

margin-right:5px;

}

#treeShare{
color:#10b981;
}

#treeClose{
color:#ef4444;
}


/* ===============================
   🌿 REOPEN LEAF BUTTON
   =============================== */

#treeLeafReopen{

position:fixed;

bottom:30px;
right:30px;

font-size:34px;

cursor:pointer;

display:none;

z-index:9998;

animation:leafFloat 3s ease-in-out infinite;

filter:drop-shadow(0 0 6px #34d399);

transition:transform .3s;

}

#treeLeafReopen:hover{

transform:scale(1.25);

}


/* floating leaf animation */

@keyframes leafFloat{

0%{transform:translateY(0)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0)}

}