/* Force visibility in WP Admin */
#jubmChatOffcanvas.offcanvas.show {
    visibility: visible !important;
}

/* Ensure it sits above the WP Admin menu and bar */
#jubmChatOffcanvas {
    z-index: 99999 !important;
    width: 420px;
}

.offcanvas-backdrop.show {
    z-index: 99998 !important;
    opacity: 0.5 !important;
}

/* Fix for the spin icon in Step 4 */
.spin {
    animation: jubm-rotate 2s infinite linear;
    display: inline-block;
}
@keyframes jubm-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Animation for new messages */
.animate__fadeInUp {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Chat Bubbles refinement */
.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.chat-bubble.sent {
    align-self: flex-end;
    background: #2271b1; /* WP Primary Blue */
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.chat-bubble.received {
    align-self: flex-start;
    background: #f0f0f1;
    color: #2c3338;
    border-radius: 12px 12px 12px 2px;
    border: 1px solid #dcdcde;
}

.chat-time {
    display: block;
    font-size: 9px;
    margin-top: 5px;
    opacity: 0.8;
    text-align: right;
}

/* Textarea styling */
#chat_message:focus {
    box-shadow: none;
    background: #fff !important;
    border-color: #007bff !important;
}

#chat-messages-container {
    background: #fdfdfd;
    max-height: calc(100vh - 180px);
}

.chat-button {
    font-size: 16px; width: 16px; height: 16px;
}