/* ============================================================
   chat-bubble.css — Shared ChatBubble component stylesheet
   Token-driven. Do not add hardcoded brand colors here.
   Bubble background/foreground come from inline CSS variables
   set per-instance by the component.
   ============================================================ */

/* ── Row (outer flex container) ─────────────────────────────── */

.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;
    /* Reserve the current-user tail's outside reach inside the row so parent scroll containers do not clip it. */
    padding-right: calc(var(--chat-bubble-tail-width, 20px) - 9px);
    box-sizing: border-box;
}

/* ── Avatar slot ─────────────────────────────────────────────── */

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

/* ── Bubble surface (shared base) ───────────────────────────── */

.ui-chat-bubble-surface {
    position: relative;
    width: fit-content;
    max-width: min(72%, 34rem);
    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;
}

/* ── Expandable bubble button reset ──────────────────────────── */

.ui-chat-bubble-surface--expandable {
    appearance: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* Re-declare tokens overridden by button reset */
    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: fit-content;
    max-width: min(72%, 34rem);
    overflow: visible;
}

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

/* ── Message text ────────────────────────────────────────────── */

/* Keep content above the tail pseudo-element */
.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);
}

/* Full surface (non-expandable) — remove clamp so full message shows */
.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;
}

/* ── Meta row (time + view more) ─────────────────────────────── */

.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;
}

/* ── Tail pseudo-element ─────────────────────────────────────── */

/* Shared base for both tails */
.ui-chat-bubble-surface--other::before,
.ui-chat-bubble-surface--current::after {
    content: "";
    position: absolute;
    /* Align the rendered tail with the bubble's painted bottom edge.
       The bubble has a transparent border, so lifting the tail by the tokenized border width
       prevents the anti-aliased triangle from reading slightly below the bubble. */
    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;
}

/* Other-user tail: points left */
.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%);
}

/* Current-user tail: points right */
.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%);
}

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ui-chat-bubble-surface,
    .ui-chat-bubble-surface--expandable {
        max-width: 86%;
    }
}