/* =========================================================
   ZAR AI v2 — CONVERSATION
   Message bubbles and typing indicator. The start state and
   Zomniverse Knowledge Layer card each have their own files —
   components/knowledge-card.css.
========================================================= */

/* ==========================================================================
   PATCH: ZAR AI v2 — Compact horizontal overflow containment
   NAME: ChatGPT · GPT-5.6 Sol
   DATE.TIME: 2026-09-05
   SHORT EXPLANATION:
   Allow the conversation flex column to shrink inside the compact panel
   instead of inheriting width from oversized City content.
   ========================================================================== */

.zar-v2-conversation {
  padding: var(--zar-v2-space-5) var(--zar-v2-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--zar-v2-space-5);
  min-width: 0;
  width: 100%;
}

/* COMMENT BLOCK
   PATCH: Compact result boundary containment
   NAME: ZAR AI v2
   DATE: 2026-09-06
   TIME: 13:21
   WHY: Keep prose and independently styled City cards inside the compact panel without taking ownership of City internals. */
.zar-v2-compact .zar-v2-conversation > * {
  min-width: 0;
  max-width: 100%;
}

.zar-v2-compact .zar-v2-city-result {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  contain: inline-size;
}

.zar-v2-msg {
  display: flex;
  flex-direction: column;
  gap: var(--zar-v2-space-1);
  max-width: min(78ch, 88%);
}

.zar-v2-msg--user { align-self: flex-end; align-items: flex-end; }
.zar-v2-msg--assistant { align-self: flex-start; align-items: flex-start; }

/* 2026-09-06 | ZAR AI v2 routing & capability parity — the trusted
   deterministic City presentation (Concept/Research/Weather/etc. —
   see zar-v2-ui.js's messageNode()/zar_city_presentation.js for the
   trust boundary). Deliberately NOT a .zar-v2-msg — a Research paper-
   card grid or Concept figure is authored for v1's own generous page
   width, not a ~78ch chat bubble, so this spans the full conversation
   column instead. Sizing/spacing only; the City templates' own CSS
   (already loaded globally — see FrontendResourceManager::head())
   supplies all real visual styling. */
  /* ==========================================================================
    PATCH: ZAR AI v2 — Restore City presentation ownership
    NAME: ChatGPT · GPT-5.6 Sol
    DATE.TIME: 2026-09-05
    SHORT EXPLANATION:
    ZAR AI v2 owns only the placement/containment boundary for routed City
    presentations. Typography, fonts, colors, code styling, links, figures,
    tables, and interaction styling remain exclusively owned by each City's
    existing template and stylesheet.
    ========================================================================== */

  .zar-v2-city-result {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

.zar-v2-msg__role {
  font-size: 0.68rem;
  font-weight: var(--zar-v2-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zar-v2-text-muted);
  padding: 0 var(--zar-v2-space-1);
}
.zar-v2-msg__user-identity { display:inline-flex; align-items:center; justify-content:flex-end; min-height:24px; padding:0 var(--zar-v2-space-1); }
.zar-v2-msg__avatar { width:24px; height:24px; display:block; border-radius:50%; object-fit:cover; border:1px solid var(--zar-v2-border-strong); background:var(--zar-v2-bg-surface-raised); }
.zar-v2-msg__avatar[hidden] { display:none; }

.zar-v2-msg__bubble {
  border-radius: var(--zar-v2-radius-lg);
  padding: var(--zar-v2-space-3) var(--zar-v2-space-4);
  font-size: var(--zar-v2-font-size-base);
  line-height: var(--zar-v2-line-height-normal);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.zar-v2-msg--user .zar-v2-msg__bubble {
  background: var(--zar-v2-user-message-bg);
  border: 1px solid var(--zar-v2-user-message-border);
  color: var(--zar-v2-user-message-text);
  border-bottom-right-radius: var(--zar-v2-radius-xs);
}

.zar-v2-msg--assistant .zar-v2-msg__bubble {
  background: var(--zar-v2-assistant-message-bg);
  border: 1px solid var(--zar-v2-assistant-message-border);
  color: var(--zar-v2-assistant-message-text);
  border-bottom-left-radius: var(--zar-v2-radius-xs);
}

.zar-v2-msg__bubble p + p { margin-top: var(--zar-v2-space-2); }

.zar-v2-msg__bubble pre {
    margin: var(--zar-v2-space-2) 0 0;
    /* padding: var(--zar-v2-space-3); */
    border-radius: var(--zar-v2-radius-sm);
    /* background: var(--zar-v2-bg-surface-sunken); */
    /* border: 1px solid var(--zar-v2-border-subtle); */
    overflow-x: auto;
    max-width: 100%;
    font-size: var(--zar-v2-font-size-sm);
    line-height: var(--zar-v2-line-height-snug);
}

.zar-v2-msg__bubble code {
  font-size: 0.85em;
}

/* ---- typing indicator --------------------------------------
   Pairs a small instance of the real ZAR mark (processing
   state) with the dot animation, rather than an unrelated
   spinner glyph — see components/icon.css. */
.zar-v2-typing {
  display: inline-flex;
  align-items: center;
  gap: var(--zar-v2-space-2);
  padding: var(--zar-v2-space-2) var(--zar-v2-space-4) var(--zar-v2-space-2) var(--zar-v2-space-2);
  border-radius: var(--zar-v2-radius-lg);
  border-bottom-left-radius: var(--zar-v2-radius-xs);
  background: var(--zar-v2-assistant-message-bg);
  border: 1px solid var(--zar-v2-assistant-message-border);
  align-self: flex-start;
}
.zar-v2-typing__label {
  font-size: var(--zar-v2-font-size-sm);
  color: var(--zar-v2-text-muted);
  white-space: nowrap;
}
.zar-v2-typing__dots { display: inline-flex; align-items: center; gap: 4px; }
.zar-v2-typing__dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--zar-v2-radius-circle);
  background: var(--zar-v2-text-muted);
  animation: zar-v2-typing-bounce 1.1s var(--zar-v2-ease-standard) infinite;
}
.zar-v2-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.zar-v2-typing__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes zar-v2-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .zar-v2-typing__dots i { animation: none; opacity: 0.7; }
}