/* Componente "chat simulado": reutilizado nos Blocos 2, 4, 6 e 7.
   O HTML estático já mostra a POSE FINAL (sem JS e em movimento reduzido).
   O JS (js/chat.js) só anima por cima. */
.chat { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; font-size: .8125rem; line-height: 1.35; position: relative; }
.chat-head { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-bottom: 1px solid var(--line); flex: none; }
.chat-av { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: .75rem; flex: none; }
.chat-who { display: grid; line-height: 1.2; min-width: 0; }
.chat-who b { font-size: .8125rem; font-weight: 600; }
.chat-who small { font-size: .6875rem; color: var(--ink-3); }
.chat-who small.on::before { content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); margin-right: .3rem; vertical-align: .05em; }
.chat-aside { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-3); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.chat-body { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: .75rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; }
.chat-track { display: flex; flex-direction: column; gap: .4rem; }
.msg { max-width: 86%; padding: .45rem .65rem; border-radius: .75rem; background: var(--bubble-in); color: var(--ink); border: 1px solid var(--line); }
.msg.in { align-self: flex-start; border-bottom-left-radius: .25rem; }
.msg.out { align-self: flex-end; background: var(--bubble-out); border-color: var(--accent-soft); border-bottom-right-radius: .25rem; }
.msg.hot { background: var(--danger-soft); border-color: var(--danger-soft); }
.msg small { display: block; margin-top: .15rem; font-size: .625rem; color: var(--ink-3); text-align: right; }
.msg .ticks { display: inline-block; width: .85rem; height: .55rem; vertical-align: -.05em; margin-left: .2rem; color: var(--accent); }
.menu { display: grid; gap: .1rem; margin-top: .25rem; color: var(--ink-2); font-size: .75rem; }
.chat-typing { display: inline-flex; gap: .2rem; padding: .5rem .65rem; border-radius: .75rem; background: var(--bubble-in); border: 1px solid var(--line); align-self: flex-start; }
.chat-typing i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--ink-3); }