#tte-chatbot-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

    font-family: sans-serif;

    transition: all 0.3s ease-in-out; /* This makes the expansion smooth */

}



/* The Icon Circle */

#tte-chat-trigger {

    width: 128px;

    height: 128px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}





/* The Window (Hidden when container is 'tte-closed') */

#tte-chat-window {

    display: none; 

    width: 300px;

    height: 400px;

    background: white;

    border-radius: 15px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.3);

    overflow: hidden;

}



/* THE MAGIC TOGGLE: When the 'tte-open' class is added via JS */

#tte-chatbot-container.tte-open #tte-chat-window {

    display: flex;

    flex-direction: column;

}



#tte-chatbot-container.tte-open #tte-chat-trigger {

    display: none; /* Hide the icon when the window is open */

}