/**
 * File:          public/css/chat_bubbles.css
 * Version:       0.2.0
 * Last Modified: 2026-11-01 07:14 AM EST
 * Changes:       0.2.0 — Chat 2.0 step 1: your bubble is neutral (var(--c2-user), no gold border), its text var(--c2-text),
 *                its token / cost line var(--c2-muted). Right side, width and corners unchanged.
 * Changes:       Small grey friendly model name in each answer header (.msg-model-id).
 * Changes:       iMessage feel on phones: your bubble at most 78% wide.
 * Changes:       New. Easier-to-read chat: your messages sit on the right in a warm gold bubble,
 *                AI answers sit on the left with a gap on the right, so turns alternate.
 *                Columns layout (side-by-side cards) is not changed.
 *                iOS twin: Council/Views/ChatBubble.swift (humanSurface, staggered rows).
 */
/* Your messages: right side, own color, no avatar. */
#chat-area .msg.user > .msg-avatar { display: none; }
#chat-area .msg.user > .msg-body { flex: 0 1 auto; max-width: min(80%, 680px); margin-left: auto; min-width: 0; }
#chat-area .msg.user .msg-content {
  background: var(--c2-user) !important;
  border: 1px solid transparent !important;
  border-radius: 16px 16px 4px 16px;
  color: var(--c2-text);
}
#chat-area .msg.user .msg-token-cost, #chat-area .msg.user .msg-token-cost .mtc-cost { color: var(--c2-muted); }
#chat-area .msg.user.clampable:not(.expanded) .msg-content::after {
  background: linear-gradient(to bottom, transparent, var(--c2-user));
}

/* AI answers: left side, with room on the right so the two sides alternate. */
body:not([data-chat-layout="columns"]) #chat-area > .msg-row { padding-right: max(10%, 48px); }
body:not([data-chat-layout="columns"]) #chat-area > .msg-row .msg-content { border-radius: 16px 16px 16px 4px; }

@media (max-width: 700px) {
  #chat-area .msg.user > .msg-body { max-width: 78%; }
  body:not([data-chat-layout="columns"]) #chat-area > .msg-row { padding-right: 28px; }
}
#chat-area .msg-header .msg-model-id { font-size: 11px; color: var(--text-secondary, #9a9aa2); white-space: nowrap; }
/* === END OF FILE (FILENAME: public/css/chat_bubbles.css) === */