/* ============================================================
   USER BUBBLE — The guest's own message in the cognitive layer
   chat interface.

   USAGE:
   <div class="message-row message-row--user">
     <div class="user-bubble">
       I want to celebrate my birthday while I'm there.
     </div>
     <span class="user-bubble__time">10:54 AM</span>
   </div>

   BEHAVIOR (handled by app logic):
   - Right-aligned (flex-end) to indicate outgoing / from guest.
   - Appears immediately on send; no loading state.
   - May show a delivery indicator below the timestamp (future).

   RULES:
   - Sharp corners (border-radius: 0) — Cordiant primitive rule.
   - Primary brand background, white text.
   - Tight padding — conversational, not button-like.
   - Must NOT resemble suggestion cards or chips.
   - No icon, no accent bar — plain text surface.
   - Max-width prevents full-bleed on wide viewports.
   - Body font, never display font.
   ============================================================ */

/* ── Message row: right-aligned ── */
.message-row--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ── Bubble ── */
.user-bubble {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  padding: 14px 20px;
  border-radius: 0;                                    /* Cordiant sharp */
  max-width: 480px;
  word-wrap: break-word;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.08);
}

/* ── Timestamp ── */
.user-bubble__time {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-light);
  padding-right: 4px;
}

/* ── Responsive: constrain on small viewports ── */
@media (max-width: 600px) {
  .user-bubble {
    max-width: 85%;
  }
}