:root {
  --chat-turn-accent: #ffd24a;
  --chat-turn-record: #9b8cf2;
  --chat-turn-border: #3a4a44;
}
.chat-turns { position:relative; }
.chat-turn { display:grid; grid-template-columns:54px minmax(0,1fr); position:relative; margin:0; }
.chat-turn::before { content:""; position:absolute; width:2px; left:26px; top:0; bottom:0; background:var(--border,var(--chat-turn-border)); }
.chat-turn__seat { z-index:1; width:40px; height:40px; box-sizing:border-box; margin:0 7px; border:1.5px solid var(--chat-turn-border); border-radius:50%; background:var(--background,#111b17); display:grid; place-items:center; transition:border-color .3s; }
.chat-turn__seat img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.chat-turn--unread .chat-turn__seat { border:3.2px dashed var(--chat-turn-accent); }
.chat-turn--own .chat-turn__seat { border-color:var(--chat-turn-accent); }
.chat-turn__content { min-width:0; padding-bottom:16px; }
.chat-turn__heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem; }
.chat-turn__new { color:var(--chat-turn-accent); font-weight:600; }
.chat-turn__day { text-align:center; margin:12px 0; }
.chat-turn__gap { margin:6px 0 6px 16px; }
.chat-turn__read-bar { border-top:2px solid var(--chat-turn-accent); color:var(--chat-turn-accent); margin:0 0 8px 26px; padding-top:4px; font-size:.8rem; }
.chat-turn__delivery { font-size:.7rem; }
.chat-turn--record .chat-turn__content { border:1px solid var(--chat-turn-record); padding:12px; margin-bottom:12px; }
.chat-turn--record::before { background:var(--chat-turn-record); }
.chat-turn--record .chat-turn__seat { color:var(--chat-turn-record); border:0; }
.chat-turn .msg { display:flex; justify-content:flex-end; margin:0; padding:4px 0; }
.chat-turn .msg > .avatar, .chat-turn .bubble__header { display:none; }
.chat-turn .message-content, .chat-turn .bubble { max-width:100%; width:auto; }
.chat-turn .bubble { background:var(--chat-bubble-background, transparent); color:var(--chat-bubble-foreground, inherit); border:0; border-radius:0; padding:0; box-shadow:none; overflow-wrap:anywhere; }
.chat-turn .meta { justify-content:flex-start; }
@media(prefers-reduced-motion:reduce) { .chat-turn__seat { transition:none; } }

.chat-turn .chat-turn__seat { position:relative; border:0; }
.chat-turn__ring { position:absolute; width:40px; height:40px; inset:0; pointer-events:none; }
.chat-turn__ring circle { stroke:var(--chat-turn-border); }
.chat-turn--own .chat-turn__ring circle { stroke:var(--chat-turn-accent); }
.chat-turn__ring path { stroke:var(--chat-turn-accent); opacity:0; transition:opacity .3s; }
.chat-turn--unread .chat-turn__ring circle { opacity:0; }
.chat-turn--unread .chat-turn__ring path { opacity:1; }
@media(prefers-reduced-motion:reduce) { .chat-turn__ring path { transition:none; } }

.chat-turn .msg--out { justify-content:flex-start; }

/* A turn follows its speaker: your turns on the left, incoming turns on the right. */
.chat-turn:not(.chat-turn--own) { grid-template-columns:minmax(0,1fr) 54px; }
.chat-turn:not(.chat-turn--own)::before { left:auto; right:26px; }
.chat-turn:not(.chat-turn--own) .chat-turn__seat { grid-column:2; grid-row:1; }
.chat-turn:not(.chat-turn--own) .chat-turn__content { grid-column:1; grid-row:1; }
.chat-turn:not(.chat-turn--own) .chat-turn__heading { justify-content:flex-end; }
.chat-turn .bubble { border-radius:10px; padding:8px 12px; }