@keyframes dsk-blink { 50% { opacity:.25; } }
.msgs { flex:1; overflow:auto; padding:20px; display:flex; gap:14px; }
.pa .msgs {
  flex-direction:column-reverse; scrollbar-width:thin; scrollbar-color:transparent transparent;
  scroll-behavior:smooth; transition:scrollbar-color .25s ease; overscroll-behavior:contain; padding-top:16px;
  padding-bottom:16px; -webkit-mask-image:none; mask-image:none;
}
.pa:not(.show-panel) .msgs { padding-left:16px; padding-right:16px; }
.msgs-in {
  width:100%; margin:0 auto; display:flex; flex-direction:column; flex-shrink:0; max-width:var(--chat-w);
  transition:max-width .28s ease; animation:none; gap:12px;
}
.msg { display:flex; flex-direction:column; }
.msg.ag { align-self:flex-start; }
.msg .imgs { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.msg .tools { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.pa .msg { gap:6px; max-width:84%; }
.msg .bubble img { display:block; }
.msg .imgs img {
  width:120px; height:90px; object-fit:cover; border-radius:12px; box-shadow:inset 0 0 0 1px var(--border);
  background:var(--surface-2);
}
.msg.me .bubble { background:var(--me-bg); color:var(--me-fg); }
.msg.ag .bubble { background:var(--ag-bg); color:var(--ag-fg); border-radius:var(--r-bubble); }
.msg.err .bubble { background:var(--tone-err-bg); color:var(--tone-err-fg); }
.msg .tools:empty { display:none; }
.msg.err .bubble { border-radius:var(--r-bubble); }
.msg.me .bubble { border-radius:22px; padding:11px 20px; }
.pa:not(.show-panel) .msg { max-width:78%; }
.bubble { white-space:pre-line; }
.bubble.typing { color:var(--text-2); font-style:italic; display:inline-flex; align-items:center; gap:8px; }
.pa .bubble { padding:14px 18px; border-radius:var(--r-bubble); font-size:14px; line-height:1.55; }
.bubble.typing::before {
  content:""; width:8px; height:8px; border-radius:50%; background:currentColor;
  animation:dsk-blink 1.2s ease-in-out infinite;
}
.meta { font-size:11px; color:var(--muted); padding:0 4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.conv:hover .msgs { scrollbar-color:var(--border-strong) transparent; }
.conv:focus-within .msgs { scrollbar-color:var(--border-strong) transparent; }
#conv > .msgs {
  grid-row:1 / -1; padding-left:var(--page-gutter); padding-right:var(--page-gutter);
  padding-top:calc(var(--ov-top, 64px) + 12px); padding-bottom:calc(var(--ov-bot, 96px) + 12px);
  scroll-padding-top:calc(var(--ov-top, 64px) + 12px); scroll-padding-bottom:calc(var(--ov-bot, 96px) + 12px);
}
.route { font-size:11px; color:var(--muted); padding:0 4px; }
.route b { color:var(--text-2); font-weight:600; }
/* messages */
.turns { display:flex; flex-direction:column; gap:8px; }
.day { align-self:center; font-size:12px; color:var(--muted); padding:14px 10px 6px; font-variant-numeric:tabular-nums; }
@supports selector(::-webkit-scrollbar) {
  .msgs::-webkit-scrollbar { width:8px; }
  .msgs::-webkit-scrollbar-button { display:none; width:0; height:0; }
  .msgs::-webkit-scrollbar-track { background:transparent; }
  .msgs::-webkit-scrollbar-thumb { background-color:transparent; border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
  .pa .msgs { scrollbar-width:auto; scrollbar-color:auto; }
  .conv:hover .msgs { scrollbar-width:auto; scrollbar-color:auto; }
  .conv:focus-within .msgs { scrollbar-width:auto; scrollbar-color:auto; }
  .conv:hover .msgs::-webkit-scrollbar-thumb { background-color:var(--border-strong); }
  .conv:focus-within .msgs::-webkit-scrollbar-thumb { background-color:var(--border-strong); }
}
@container (min-width: 1500px) {
  .pa:not(.show-panel) .msgs-in { max-width:1180px; }
}
@container (max-width: 719px) {
  .msgs { padding:14px 12px; }
  .pa .msg { max-width:92%; }
  .msg .imgs img { width:96px; height:72px; }
  .pa .bubble { padding:12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa .msgs { scroll-behavior:auto; transition:none; }
  .msgs-in { transition:none; }
  .bubble.typing::before { animation:none; }
}