/* ==========	Containing elements	========== */

#chat-bot-card {
    --card-height: 400px;

    height: var(--card-height);
    overflow: hidden;
    padding: 0;
}

.chat-interface-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========	Chat message area	========== */

.chat-messages {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--p2);
    display: flex;
    flex-direction: column;
    gap: var(--p2);
}

.chat-message {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.chat-message.user {
    align-items: flex-end;
}

.chat-message.assistant {
    align-items: flex-start;
}

.message-bubble {
    max-width: 80%;
    padding: var(--p1) var(--p2);
    border-radius: calc(var(--border-radius) * 2); /* was 16px */
    box-shadow: var(--shadow);
}

.chat-message.user .message-bubble {
    background: var(--blue);
    color: var(--black);
    border-bottom-right-radius: var(--p-half); /* was 4px */
}

.chat-message.assistant .message-bubble {
    background: var(--light-grey);
    color: var(--ddark-grey);
    border-bottom-left-radius: var(--p-half); /* was 4px */
}

/* ==========	Input Bar	========== */

.chat-input-container {
    display: flex;
    align-items: center;
    gap: var(--p1);

    border-top: var(--shadow-border);
    padding: var(--p1);
    background: var(--white);
}

.chat-input {
    flex: 1 1 auto;
    border: var(--shadow-border);
    border-radius: var(--border-radius);
    padding: var(--p1) var(--p2);
    background: var(--llight-grey);
    color: var(--black);
    height: 100%;
}

.chat-send-btn {
    background: var(--blue);
    border: none;
    border-radius: 50%;
    width: calc(var(--icon) * 2.5);
    height: calc(var(--icon) * 2.5);
    font-size: 1.2em !important;
}

.chat-send-btn:hover {
    background: var(--dark-blue);
}