/* Scripted chat loop (part.js drives it). Markup: part.js builds everything inside an empty .chatloop, or
   leave your own .chatloop__head inside it and part.js keeps it.

   Knobs: */
.chatloop {
  --chat-ink: #282828;            /* text, border, head bar */
  --chat-paper: #f4f3ee;          /* panel */
  --chat-me: #e0e0d7;             /* "me" bubble fill */
  --chat-rule: #b3b3af;           /* hairlines + "them" bubble outline */
  --chat-muted: #9a9993;          /* placeholder + idle send icon */
  --chat-accent: #f15534;         /* send icon while typing */
  --chat-shadow: 0 8px 0 #000;    /* hard drop shadow (0 .8rem #000) */
  --chat-border: 1.5px;           /* panel border (max(1.5px, .15rem)) */
  --chat-w: 324px;                /* panel width (32.4rem) */
  --chat-h: 384px;                /* panel height */
  --chat-pad: 12px;               /* body padding + gap between bubbles (1.2rem) */
  --chat-bubble: 62%;             /* bubble width (20rem of 32.4rem) */
  --chat-font: ui-sans-serif, system-ui, sans-serif;
  --chat-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --chat-pop: 0s;                 /* bubble opacity/rise transition; the source has none (a hard cut 200ms after append) */
  --chat-spin: 0.6s;              /* typing spinner cycle (- \ | /, steps(4)) */

  position: relative; box-sizing: border-box; width: var(--chat-w); max-width: 100%; height: var(--chat-h);
  display: flex; flex-direction: column; background: var(--chat-paper); color: var(--chat-ink);
  border: var(--chat-border) solid var(--chat-ink); box-shadow: var(--chat-shadow);
  font: 12px/1.35 var(--chat-font);
}
.chatloop * { box-sizing: border-box; }

.chatloop__head { flex: none; padding-bottom: 1px; background: linear-gradient(69deg, var(--chat-ink), #aaa); }
.chatloop__title { background: var(--chat-ink); color: var(--chat-paper); padding: 8px 12px;
  font: 500 12px/1.2 var(--chat-mono); letter-spacing: .06em; text-transform: uppercase; }

.chatloop__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--chat-pad);
  padding: var(--chat-pad); }
.chatloop__body > :first-child { margin-top: auto; }   /* stack from the bottom but stay scrollable */

.chatloop__msg { width: var(--chat-bubble); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; flex: none;
  opacity: 0; transform: translateY(10px); transition: opacity var(--chat-pop) ease, transform var(--chat-pop) ease; }
.chatloop__msg.is-in { opacity: 1; transform: none; }
.chatloop__msg--me { margin-left: auto; background: var(--chat-me); }
.chatloop__msg--them { border: 1px solid var(--chat-rule); }
.chatloop__time { font: 10px/1.2 var(--chat-mono); opacity: .7; }

.chatloop__typing { flex: none; align-self: flex-start; margin-left: var(--chat-pad); padding-bottom: var(--chat-pad);
  font: 14px/1 var(--chat-mono); color: var(--chat-muted); display: none; }
.chatloop__typing::after { content: "-"; display: inline-block; min-width: 14px; animation: chatloop-spin var(--chat-spin) steps(4, end) infinite; }
@keyframes chatloop-spin { 0% { content: "-"; } 25% { content: "\\"; } 50% { content: "|"; } 75% { content: "/"; } 100% { content: "-"; } }

.chatloop__foot { flex: none; padding: var(--chat-pad); border-top: 1px solid var(--chat-rule); }
.chatloop__input { display: flex; align-items: center; border: 1px solid var(--chat-rule); padding-left: 10px; }
.chatloop__field { flex: 1; min-width: 0; padding-right: 10px; color: var(--chat-muted); transition: color .4s;
  font: 10px/1.3 var(--chat-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatloop__field.is-typing { color: var(--chat-ink); white-space: normal; text-overflow: clip; padding-block: 4px; }
.chatloop__send { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-left: 1px solid var(--chat-rule);
  color: var(--chat-muted); transition: color .4s; }
.chatloop__field.is-typing + .chatloop__send { color: var(--chat-accent); }
.chatloop__send svg { width: 16px; height: 16px; }

.chatloop[data-chat-mode="bubbles"] .chatloop__foot { display: none; }   /* bubbles mode: no input bar */

@media (prefers-reduced-motion: reduce) { .chatloop__typing::after { animation: none; } }