.ui-chat-bubble-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--meb-space-stack-xs);
}



.ui-chat-bubble-row {
    display: flex;
    width: 100%;
    gap: var(--meb-space-inline-md);
    align-items: flex-end;
    overflow: visible;
}

.ui-chat-bubble-row--other {
    justify-content: flex-start;
}

.ui-chat-bubble-row--current {
    justify-content: flex-end;
    
    padding-right: calc(var(--chat-bubble-tail-width, 20px) - 9px);
    box-sizing: border-box;
}



.ui-chat-bubble-avatar-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--meb-space-stack-xs);
}



.ui-chat-bubble-surface {
    position: relative;
    
    width: 100%;
    border-radius: var(--meb-border-radius-sm);
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    background: var(--chat-bubble-background, var(--meb-surface-card));
    color: var(--chat-bubble-foreground, var(--meb-text-default));
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    line-height: var(--meb-font-lineheight-body);
    border: 1px solid transparent;
    word-break: break-word;
    overflow: visible;
}



.ui-chat-bubble-surface--expandable {
    appearance: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    
    background: var(--chat-bubble-background, var(--meb-surface-card));
    color: var(--chat-bubble-foreground, var(--meb-text-default));
    padding: var(--meb-space-stack-sm) var(--meb-space-inline-md);
    border-radius: var(--meb-border-radius-sm);
    
    width: 100%;
    overflow: visible;
}

.ui-chat-bubble-surface--expandable:focus-visible {
    outline: var(--meb-focus-ring-width) solid var(--meb-accent-primary);
    outline-offset: var(--meb-focus-ring-offset);
}




.ui-chat-bubble-message,
.ui-chat-bubble-meta {
    position: relative;
    z-index: 1;
}

.ui-chat-bubble-message {
    display: -webkit-box;
    line-clamp: var(--chat-bubble-preview-lines, 3);
    -webkit-line-clamp: var(--chat-bubble-preview-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
    max-height: calc(var(--chat-bubble-preview-lines, 3) * 1lh);
}


.ui-chat-bubble-surface:not(.ui-chat-bubble-surface--expandable) .ui-chat-bubble-message {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
}



.ui-chat-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--meb-space-inline-sm);
    width: 100%;
    min-width: 0;
    margin-top: var(--meb-space-stack-xs);
}

.ui-chat-bubble-time {
    flex: 0 0 auto;
    font-size: var(--meb-font-size-body-sm-desktop);
    line-height: var(--meb-font-lineheight-tight);
    opacity: 0.78;
}

.ui-chat-bubble-more {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: var(--meb-font-size-body-sm-desktop);
    line-height: var(--meb-font-lineheight-tight);
    font-weight: var(--meb-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}




.ui-chat-bubble-surface--other::before,
.ui-chat-bubble-surface--current::after {
    content: "";
    position: absolute;
    
    bottom: var(--meb-border-width-sm);
    width: var(--chat-bubble-tail-width, 20px);
    height: var(--chat-bubble-tail-height, 18px);
    background: var(--chat-bubble-background, var(--meb-surface-card));
    pointer-events: none;
    z-index: 0;
}


.ui-chat-bubble-surface--other::before {
    left: calc(-1 * var(--chat-bubble-tail-width, 20px) + 9px);
    clip-path: polygon(100% 42%, 0 100%, 100% 100%);
}


.ui-chat-bubble-surface--current::after {
    right: calc(-1 * var(--chat-bubble-tail-width, 20px) + 9px);
    clip-path: polygon(0 42%, 100% 100%, 0 100%);
}




.ui-chat-bubble-trailing-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--meb-space-stack-xs);
}

.ui-chat-bubble-overflow {
    position: relative;
}



.ui-chat-bubble-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--meb-space-stack-xs);
    max-width: min(72%, 34rem);
    min-width: 0;
}


.ui-chat-bubble-overflow-trigger {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--meb-text-muted, var(--meb-text-default));
    opacity: 0.62;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--meb-border-radius-sm);
    cursor: pointer;
}

.ui-chat-bubble-overflow-trigger:hover,
.ui-chat-bubble-overflow-trigger:focus-visible {
    opacity: 1;
    background: var(--meb-surface-input-filled);
}

.ui-chat-bubble-overflow-trigger:focus-visible {
    outline: var(--meb-focus-ring-width) solid var(--meb-accent-primary);
    outline-offset: var(--meb-focus-ring-offset);
}


.ui-chat-bubble-overflow-menu {
    --chat-bubble-avatar-slot-width: calc(48px + var(--meb-space-inline-md));
    align-self: flex-start;
    margin-left: var(--chat-bubble-avatar-slot-width, 48px);
    width: fit-content;
    max-width: calc(100% - var(--chat-bubble-avatar-slot-width, 48px));
    min-width: 10rem;
    padding: var(--meb-space-stack-xs);
    background: var(--meb-surface-card);
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-sm);
    box-shadow: var(--meb-shadow-dropdown, var(--meb-shadow-sm));
    display: flex;
    flex-direction: column;
    gap: var(--meb-space-stack-xs);
}

.ui-chat-bubble-overflow-item {
    appearance: none;
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--meb-space-stack-xs) var(--meb-space-inline-sm);
    border-radius: var(--meb-border-radius-sm);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-sm-desktop);
    color: var(--meb-text-default);
    cursor: pointer;
}

.ui-chat-bubble-overflow-item:hover,
.ui-chat-bubble-overflow-item:focus-visible {
    background: var(--meb-surface-input-filled);
}

.ui-chat-bubble-overflow-item:disabled {
    opacity: 0.6;
    cursor: default;
}



.ui-chat-bubble-state-badge-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--meb-space-inline-xs);
}




.mobile-root .ui-chat-bubble-stack {
    max-width: 86%;
}