/* Chat boxes (simulator, conversations, interview) */
.phone { display: flex; flex-direction: column; height: 70vh; padding: 0; overflow: hidden; }
.phone-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 18px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.lead { align-self: flex-start; background: var(--lead); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-end; background: var(--bot); color: #fff; border-bottom-left-radius: 4px; }
.msg.owner { align-self: flex-end; background: var(--owner); color: #fff; border-bottom-left-radius: 4px; }
.msg .who { display: block; font-size: 11px; opacity: .75; margin-bottom: 2px; }
.msg.note { align-self: center; background: none; color: var(--muted); font-size: 13px; }
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.composer input { margin: 0; }
pre { background: var(--bg); padding: 12px; border-radius: 10px; direction: ltr; text-align: left; overflow-x: auto; font-size: 13px; }
.composer textarea { margin: 0; resize: vertical; }