/* The agent sidebar (ax-), framed by the storefront: one narrow column, 360 to 420 px wide
   (docs/plans/lena/01-agent-site-shell.md). A header, the thread and the composer. */

html, body { height: 100%; }
body { margin: 0; background: var(--surface-card); }
.ax-shell { display: flex; flex-direction: column; height: 100%; min-width: 320px; }

/* ---- Header ---- */
.ax-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.ax-lena {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px;
  background: var(--ca-black); color: var(--text-inverse);
  font-size: var(--text-md); font-weight: var(--weight-semibold);
}
.ax-who { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: var(--leading-tight); }
.ax-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.ax-sub { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- The thread ---- */
.ax-thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
}
.ax-messages { display: contents; }
.ax-msg { display: flex; flex-direction: column; gap: var(--space-1); max-width: 88%; }
.ax-msg[data-role="visitor"] { align-self: flex-end; align-items: flex-end; }
.ax-msg[data-role="lena"], .ax-msg[data-role="staff"] { align-self: flex-start; }
.ax-msg[data-role="system"] { align-self: center; max-width: 100%; }
.ax-meta { font-size: var(--text-xs); color: var(--text-muted); }
.ax-bubble {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  font-size: var(--text-md); line-height: var(--leading-normal); overflow-wrap: anywhere;
}
.ax-msg[data-role="visitor"] .ax-bubble { background: var(--ca-black); color: var(--text-inverse); border-bottom-right-radius: var(--radius-sm); white-space: pre-wrap; }
.ax-msg[data-role="lena"] .ax-bubble { background: var(--surface-sunken); border-bottom-left-radius: var(--radius-sm); }
/* a person at CreativeArt: white, with a border, so it never reads as Lena */
.ax-msg[data-role="staff"] .ax-bubble { background: var(--surface-card); border: 1px solid var(--border-strong); border-bottom-left-radius: var(--radius-sm); }
.ax-msg[data-role="system"] .ax-bubble { padding: 0; font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
.ax-msg[data-state="failed"] .ax-bubble { outline: 1px solid var(--ca-danger); }
.ax-msg[data-state="sending"] { opacity: .7; }
.ax-bubble > :first-child { margin-top: 0; }
.ax-bubble > :last-child { margin-bottom: 0; }
.ax-bubble p, .ax-bubble ul, .ax-bubble ol { margin: 0 0 var(--space-2); }
.ax-bubble ul, .ax-bubble ol { padding-left: var(--space-5); }
.ax-bubble a { color: inherit; text-decoration: underline; }
.ax-bubble code { font-family: var(--font-mono); font-size: .92em; }

/* the greeting and its suggested questions */
.ax-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ax-suggest button {
  padding: 6px var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background var(--dur-fast);
}
.ax-suggest button:hover { background: var(--surface-sunken); }
.ax-suggest button:disabled { opacity: .45; cursor: not-allowed; }

/* where a lock started a new topic (docs/plans/lena/02-conversations.md) */
.ax-divider { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.ax-divider::before, .ax-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-default); }

/* Lena is writing */
.ax-typing { display: inline-flex; gap: 4px; padding: var(--space-1) 0; }
.ax-typing span { width: 6px; height: 6px; border-radius: 3px; background: var(--ca-neutral-400); animation: ax-blink 1.2s infinite both; }
.ax-typing span:nth-child(2) { animation-delay: .2s; }
.ax-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ax-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ax-typing span { animation: none; opacity: .6; } }

/* ---- Composer ---- */
.ax-composer { padding: var(--space-3) var(--space-4) var(--space-3); border-top: 1px solid var(--border-default); }
.ax-compose { display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; }
.ax-compose .ca-textarea { flex: 1; min-height: var(--control-h-lg); max-height: 160px; resize: none; }
.ax-compose .ca-ibtn { flex: none; width: var(--control-h-lg); height: var(--control-h-lg); }
.ax-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.ax-error { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ca-danger); }