/* =========================
   NEW UI BUBBLES (LEFT + RIGHT)
   Paste at END of BubbleStyle.css
   ========================= */

/* Containers */
.chat-container-left {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.chat-container-right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

/* Shared bubble defaults */
.chat-bubble-left,
.chat-bubble-right {
    display: inline-block; /* wrap content */
    width: fit-content;
    max-width: 70%;
    padding: 12px 14px;
    border-radius: 12px;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* LEFT (incoming) bubble */
.chat-bubble-left {
    background: #F5F7FB; /* light grey */
    border: 1px solid #E3E8F2;
    color: #1F2A44;
    margin: 10px 8px 10px 2%;
}

/* RIGHT (outgoing) bubble — lavender like screenshot */
.chat-bubble-right {
    background: #D9D9FF; /* light lavender */
    border: 1px solid #C9C9FF; /* slightly darker outline */
    color: #1F2A44;
    margin: 10px 2% 10px 8px;
    text-align: left; /* keep text readable like screenshot */
}

/* Sender row (name left, time right) */
.sender-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-top: 6px; /* space below message text */
}

/* Sender name */
.sender-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
}

/* Time */
.message-time {
    font-size: 12px;
    line-height: 1.2;
    margin-left: 16px;
    font-style: normal;
    white-space: nowrap;
}

/* Colors for sender/time per bubble (so they match screenshot) */
.chat-bubble-left .sender-name {
    color: #5B6B84;
}

.chat-bubble-left .message-time {
    color: #97A3B8;
}

.chat-bubble-right .sender-name {
    color: #5B6B84;
}

.chat-bubble-right .message-time {
    color: #6F78A8;
}
/* slightly stronger on lavender */

/* Optional: make long single-words break nicely */
.chat-bubble-left,
.chat-bubble-right {
    overflow-wrap: anywhere;
}

/* FORCE OVERRIDE (in case other CSS or inline styles exist) */
#chat .chat-bubble-left {
    background: #F5F7FB !important;
    border: 1px solid #E3E8F2 !important;
    color: #1F2A44 !important;
    border-radius: 12px !important;
}

#chat .chat-bubble-right {
    background: #D9D9FF !important;
    border: 1px solid #C9C9FF !important;
    color: #1F2A44 !important;
    border-radius: 12px !important;
}
/* =========================
   Scrollable chat area
   ========================= */
#chat {
    height: 360px; /* change to 300/400 if needed */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 14px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
/* If any parent styling blocks scrolling, force allow it */
.box .box-content#chat {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.chat-bubble-left:focus,
.chat-bubble-right:focus,
.chat-bubble-center:focus {
    outline: 2px dotted #007BFF;
    outline-offset: 4px;
}

/* =========================
   NEW UI TYPOGRAPHY + BUBBLE SCALE (scoped to chat modal)
   Paste at END of BubbleStyle.css
   ========================= */