/* ═══ Chat panel, game log and the speech bubbles over the seats ═══════════════════════════════ */

.chat-messages { height: 180px; gap: 8px; padding: 10px; font-size: 13px; scroll-behavior: smooth; overscroll-behavior: contain; }
.chat-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 92%; animation: chat-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.chat-msg .chat-av { flex: 0 0 auto; display: grid; }
.chat-body { min-width: 0; padding: 6px 10px 7px; border-radius: 14px 14px 14px 4px; background: var(--nx-surface-3, rgba(255, 255, 255, 0.07)); border: 1px solid var(--nx-border, rgba(255, 255, 255, 0.08)); border-inline-start: 3px solid var(--who, #8d98b8); }
.chat-meta { display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.chat-msg-name { font-weight: 700; font-size: 11.5px; color: var(--who, var(--accent)); display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta time { margin-inline-start: auto; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chat-msg-text { margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.4; }
.chat-msg.chat-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-mine .chat-body { border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent, #5b8dee) 22%, transparent); border-inline-start-width: 1px; border-inline-end: 3px solid var(--who, var(--accent)); }
.chat-mine .chat-meta { flex-direction: row-reverse; }
.chat-spec .chat-body { opacity: 0.82; font-style: italic; }
.chat-msg.chat-ghost { opacity: 0.75; }
.chat-msg.chat-mafia .chat-body { border-color: #e53935; }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } }
.chat-form { gap: 8px; }
.chat-form input { border-radius: 999px; padding-inline: 14px; }

/* the log: icon column, quiet rows, turn dividers */
.game-log { padding: 8px; gap: 2px; scroll-behavior: smooth; overscroll-behavior: contain; }
.log-entry { align-items: flex-start; padding: 4px 8px 4px 0; border-left-width: 3px; border-radius: 0 8px 8px 0; }
.log-icon { display: inline-flex; justify-content: center; padding-left: 4px; padding-top: 2px; opacity: 0.85; }
.log-dot { width: 4px; height: 4px; margin-top: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.log-entry.type-game { border-radius: 0 8px 8px 0; }
.log-entry.type-turn { padding: 10px 6px 4px; letter-spacing: 0.3px; }

/* speech bubbles over the seats (card tables) */
#chat-bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.chat-bubble { position: absolute; left: 0; top: 0; max-width: min(240px, 70vw); padding: 7px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; font-weight: 600; color: #101521; background: #fff; border: 2px solid var(--who, #5b8dee); box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; animation: bubble-in 220ms cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }
.chat-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -8px; width: 12px; height: 12px; background: #fff; border-right: 2px solid var(--who, #5b8dee); border-bottom: 2px solid var(--who, #5b8dee); transform: translateX(-50%) rotate(45deg); }
.chat-bubble-below::after { bottom: auto; top: -8px; border: 0; border-left: 2px solid var(--who, #5b8dee); border-top: 2px solid var(--who, #5b8dee); }
.chat-bubble-out { opacity: 0; transition: opacity 200ms ease-out; }
@keyframes bubble-in { from { opacity: 0; scale: 0.85; } }
@media (prefers-reduced-motion: reduce) { .chat-msg, .chat-bubble { animation: none; } .chat-messages, .game-log { scroll-behavior: auto; } }

.chat-msg.chat-guessed .chat-body { border-style: dashed; }