/* rado2loc app styles (not in the design system): the conversation of a booking (bookings/show, messages/_message,
   messages/_form). The conversation Stimulus controller adds .is-mine to the viewer's own messages. */
.r2l-conversation { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.r2l-conversation-list { display: flex; flex-direction: column; gap: var(--space-3); max-height: 60vh; min-height: 160px; overflow-y: auto; padding: var(--space-4); background: var(--surface-sunken); }
.r2l-conversation-empty { margin: auto; max-width: 40ch; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.r2l-conversation-list:has(.r2l-message) .r2l-conversation-empty { display: none; }
.r2l-conversation-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--line); }

.r2l-message { align-self: flex-start; max-width: min(85%, 36rem); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs); background: var(--surface-raised); }
.r2l-message.is-mine { align-self: flex-end; border-color: transparent; border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); background: var(--marine-fill); }
.r2l-message-meta { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.r2l-message.is-mine .r2l-message-meta { color: color-mix(in srgb, var(--on-marine-fill) 75%, transparent); }
.r2l-message-body { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.r2l-message.is-mine .r2l-message-body { color: var(--on-marine-fill); }
.r2l-message-body p + p { margin-top: var(--space-2); }