.chatbot-shortcut-component .chat-bot-buttons {
    display: flex;
    gap: 10px;
}

.chatbot-shortcut-component .chatbot-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.chatbot-shortcut-component .chatbot-image-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}

    .chatbot-shortcut-component .chatbot-image-wrapper img {
        display: block;
        max-width: 100px;
        width: 100px;
    }

    .chatbot-shortcut-component .chatbot-image-wrapper .stop-start-buttons {
        z-index: 3;
    }

        .chatbot-shortcut-component .chatbot-image-wrapper .stop-start-buttons button {
            width: 17px;
            height: 17px;
            background-color: transparent;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        .chatbot-shortcut-component .chatbot-image-wrapper .stop-start-buttons.play-mode button {
            background-image: url('/images/icons/pause.png');
        }

        .chatbot-shortcut-component .chatbot-image-wrapper .stop-start-buttons.pause-mode button {
            background-image: url('/images/icons/play.png');
        }

.chatbot-shortcut-component .chatbot-text-area {
    flex: 1;
}

.chatbot-shortcut-component .stop-start-buttons button {
    margin-inline-end: 0;
}

@media (max-width: 768px) {
    .chatbot-shortcut-component .chat-bot-buttons {
        flex-direction: column;
    }

    .chatbot-shortcut-component .chatbot-content {
        flex-direction: column-reverse;
    }

    .chatbot-shortcut-component .chatbot-image-wrapper {
        align-items: flex-start;
    }
}