/* Keep the original app shell. Only the chat header gains a phone entry. */
.topbar > .chat-phone-entry { display: none; color: var(--parent-accent); }
body[data-page="chat"] .topbar { gap: 6px; }
body[data-page="chat"] .topbar > .chat-phone-entry { display: grid; }
body[data-page="chat"] .topbar > .identity { flex-shrink: 0; white-space: nowrap; }
.topbar > .identity { margin-right: auto; }

/* Avatar gutters belong to the message, so attached business cards stay separate. */
#conversation > .message {
  position: relative;
  min-width: 0;
  margin-left: 0;
  padding-left: 42px;
  padding-right: 0;
  gap: 10px;
}
#conversation > .message.user {
  padding-left: 0;
  padding-right: 42px;
  align-items: flex-end;
}
#conversation > .message > .message-avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 33px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--parent-soft);
  color: var(--parent-ink);
  font-size: 12px;
  line-height: 1;
}
#conversation > .message > .message-avatar .icon { width: 21px; height: 21px; }
#conversation > .message.user > .message-avatar {
  left: auto;
  right: 0;
  background: #e9e5dc;
  color: var(--parent-ink);
}

/* Only spoken text is a bubble; receipts and controls remain independent. */
#conversation > .message > .message-body {
  position: relative;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 10px 13px;
  border-radius: 6px;
  background: #fff;
  color: var(--parent-ink);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
#conversation > .message > .message-body::before,
#conversation > .message > .message-body:has(> .action-receipt) > .answer-block:first-child::before,
#conversation > .message > .message-body:has(> .past-proposal) > .answer-block:first-child::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -4px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: inherit;
}
#conversation > .message.user > .message-body { background: var(--parent-soft); color: var(--parent-ink); }
#conversation > .message.user > .message-body::before { left: auto; right: -4px; }
#conversation > .message > .message-body:empty { display: none; }
#conversation > .message > .message-body:has(> .action-receipt),
#conversation > .message > .message-body:has(> .past-proposal) {
  width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
#conversation > .message > .message-body:has(> .action-receipt)::before,
#conversation > .message > .message-body:has(> .past-proposal)::before { display: none; }
#conversation > .message > .message-body:has(> .action-receipt) > .answer-block,
#conversation > .message > .message-body:has(> .past-proposal) > .answer-block {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: 6px;
  background: #fff;
}
#conversation > .message > .message-body > .action-receipt { margin-top: 0; }
#conversation > .message > .message-body > .past-proposal { margin-top: 0; }
#conversation > .message > .message-delivery { margin-top: -5px; font-size: 12px; }
#conversation > .message > :is(.task-card, .change-card, .growth-chat-card) { max-width: 100%; }
#conversation > .message > .attachment-pill { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
#conversation > .typing-indicator > .typing-bubble { background: #fff; border-radius: 6px; }

/* A call is a compact conversation item; its transcript opens on demand. */
#conversation .voice-call-record .call-record {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  max-width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}
#conversation .voice-call-record .call-record > .icon { color: var(--parent-accent); }
#conversation .voice-call-record .call-record > span { min-width: 0; }
#conversation .voice-call-record .call-record strong { display: block; font-size: 14px; font-weight: 500; }
#conversation .voice-call-record .call-record small { display: block; font-size: 12px; color: var(--muted); }

@media (max-width: 374px) {
  body[data-page="chat"] .topbar { gap: 4px; padding-left: 12px; padding-right: 12px; }
  #conversation > .message { padding-left: 37px; }
  #conversation > .message.user { padding-left: 0; padding-right: 37px; }
  #conversation > .message > .message-avatar { width: 29px; height: 32px; }
  #conversation > .message > .message-body { padding: 10px 12px; font-size: 15px; }
  #conversation > .message > .message-body:has(> .action-receipt),
  #conversation > .message > .message-body:has(> .past-proposal) { padding: 0; }
}

/* A suggestion stays in the conversation until the parent chooses what to try. */
.conversation-step { width:100%; padding:21px; background:var(--parent-soft); border:1px solid var(--parent-border); border-radius:22px; overflow-wrap:anywhere; }
.conversation-step h3 { margin:8px 0 10px; font-size:20px; line-height:1.5; color:var(--parent-ink); }
.conversation-step > p:not(.eyebrow) { margin:0; font-size:15px; line-height:1.8; color:var(--muted); white-space:pre-wrap; }
.conversation-step .welcome-actions { margin-top:20px; }
.conversation-step .welcome-actions button { min-height:44px; }
#conversation > .message.assistant > .message-avatar:has(img) { background:transparent; }
#conversation .message-avatar img { width:34px; height:34px; object-fit:contain; }
@media(max-width:374px) { .conversation-step { padding:16px; } .conversation-step h3 { font-size:18px; } }

/* Animate only new content; stable message nodes keep dots and entrances running. */
#conversation > .message.user[data-entering] > .message-body {
  transform-origin: bottom right;
  animation: bubble-send 460ms cubic-bezier(.22,.8,.25,1) both;
}
#conversation > .message.assistant[data-entering] > .message-body {
  transform-origin: bottom left;
  animation: bubble-receive 420ms cubic-bezier(.2,.8,.25,1) both;
}
#conversation > .message[data-entering] > :not(.message-body):not(.message-delivery) {
  animation: message-detail-enter 360ms ease-out both;
}
#conversation > .typing-indicator > .typing-bubble {
  transform-origin: bottom left;
  animation: bubble-receive 300ms cubic-bezier(.2,.8,.25,1) both;
}
#conversation .typing-dots i { animation-duration: 1.35s; }
#conversation .message-delivery { font-variant-numeric: tabular-nums; }
@keyframes bubble-send {
  0% { opacity:0; transform:translate(8px,24px) scale(.92); }
  72% { opacity:1; transform:translate(0,-1px) scale(1.012); }
  100% { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes bubble-receive {
  from { opacity:0; transform:translate(-4px,14px) scale(.97); }
  to { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes message-detail-enter {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  #conversation > .message:is(.user,.assistant)[data-entering] > .message-body,
  #conversation > .message[data-entering] > :not(.message-body):not(.message-delivery),
  #conversation > .message[data-entering] > *,
  #conversation > .typing-indicator > .typing-bubble,
  #conversation .typing-dots i { animation:none; }
}

.task-receipt { background:#edf4e8; border-color:#cfdcc4; }
.task-receipt .eyebrow { color:#416246; }
.task-receipt .text-button { margin-top:12px; min-height:44px; padding-left:0; }
.conversation-step .welcome-actions { flex-wrap:wrap; }