/* landing_pages/worked_example/_agent_session — a feature page's agent session.
 * The question and answer reuse agent/_message's .message-user and
 * .message-assistant; this file lays out the card and the tool calls between them. */

.landing-session {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Mobile: tighten the card padding from 32 to 24, as .showcase-card does. */
@media (max-width: 47.999rem) {
  .landing-session { padding: var(--spacing-24); }
}

.landing-session__calls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding: var(--spacing-12) var(--spacing-16);
  list-style: none;
  border-left: var(--stroke-weight-2) solid var(--border-default);
}

.landing-session__call {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

/* A tool call wraps anywhere rather than scroll the page sideways at phone width. */
.landing-session__call-signature {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.landing-session__call-tool {
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}

.landing-session__call-result {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

/* .message-assistant pads 12 for the chat column; the card already pads. */
.landing-session__answer { padding: 0; }

/* The card is surface-1, the chat bubble's own fill; step the bubble up one. */
.landing-session .message-user-bubble { background-color: var(--background-surface-2); }