/* Speech Bubble (Right Side) */
#speech-bubble {
    background: #FFF;
    color: var(--primary-color);
    font-weight: 700;
    font-family: var(--heading-font);
    border: 2px solid var(--primary-color);
    border-radius: 1rem;
    position: absolute;
    top: 50%; /* Center vertically with robot */
    left: 100%; /* Move to right side */
    transform: translateY(-50%); /* Adjust vertical alignment */
    margin-left: 20px; /* Space between robot and bubble */
    width: 250px; /* Wider bubble */
    padding: 15px;
    text-align: center;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

/* Arrow pointing Left (to the robot) */
#speech-bubble:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 10px 10px 10px 0; /* Triangle pointing left */
    border-color: transparent var(--primary-color) transparent transparent;
    border-style: solid;
    position: absolute;
    top: 50%;
    left: -10px; /* Outside bubble on the left */
    transform: translateY(-50%);
}