/* WhatsApp Style CSS */

/* Body background for WhatsApp-style */
.whatsapp-body {
    background-color: #0d1117 !important;
}

/* Customized message styles for WhatsApp look */
.whatsapp-overrides .message-bubble {
    border-radius: 8px;
    padding: 10px 12px;
    max-width: 90%;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Styling for user messages */
.message-user.whatsapp-overrides .message-bubble {
    background-color: #25D366 !important; /* WhatsApp green color */
    color: #111;
    float: right;
    margin-left: auto;
    border-top-right-radius: 0;
}

/* Styling for assistant messages */
.message-assistant.whatsapp-overrides .message-bubble {
    background-color: #333333 !important; /* Dark gray */
    color: #fff;
    float: left;
    margin-right: auto;
    border-top-left-radius: 0;
}

/* Fix for the floating elements */
.whatsapp-overrides .message-content {
    overflow: hidden;
    display: block;
    width: 100%;
}

/* Make sure list formatting matches WhatsApp */
.whatsapp-overrides .message-bubble ol,
.whatsapp-overrides .message-bubble ul {
    padding-left: 5px !important;
    margin: 0 !important;
}

.whatsapp-overrides .message-bubble li {
    margin-bottom: 0 !important;
}

/* Format title headings */
.whatsapp-overrides .message-bubble strong {
    display: block;
    margin-bottom: 2px;
}

/* Format bullets and lists */
.whatsapp-overrides .message-bubble ul {
    list-style-type: none;
}

.whatsapp-overrides .message-bubble ul li::before {
    content: "•";
    margin-right: 5px;
}

/* Typing indicator WhatsApp style */
.typing-indicator-container.whatsapp-overrides .typing-bubble {
    background-color: #333333;
    padding: 10px;
    border-radius: 8px;
    border-top-left-radius: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    min-width: 45px;
}

/* WhatsApp-style dots */
.typing-indicator-container.whatsapp-overrides .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #25D366; /* Verde WhatsApp */
    animation: pulse 1.2s infinite;
    margin: 0 2px;
}

.typing-indicator-container.whatsapp-overrides .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator-container.whatsapp-overrides .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Fix text paragraph spacing */
.whatsapp-overrides .message-bubble p {
    margin-bottom: 0.5rem;
}

.whatsapp-overrides .message-bubble p:last-child {
    margin-bottom: 0;
}

/* Improve numbered list formatting */
.whatsapp-overrides .message-bubble ol {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
}

.whatsapp-overrides .message-bubble ol li {
    counter-increment: item;
    margin-bottom: 4px;
    position: relative;
}

.whatsapp-overrides .message-bubble ol li::before {
    content: counter(item) ". ";
    font-weight: bold;
}

/* Make links in WhatsApp style */
.whatsapp-overrides .message-bubble a {
    color: #85c1e9;
    text-decoration: underline;
}

/* Make sure images are properly sized */
.whatsapp-overrides .message-bubble img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Buttons for conversation starters */
.whatsapp-overrides .conversation-starters {
    margin-top: 8px;
}

.whatsapp-overrides .conversation-starters .btn {
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 0.85rem;
    background-color: #128C7E;
    border-color: #128C7E;
    color: white;
}

.whatsapp-overrides .conversation-starters .btn:hover {
    background-color: #075E54;
    border-color: #075E54;
}

/* Clear fix to prevent collapse */
.whatsapp-overrides:after {
    content: "";
    display: table;
    clear: both;
}