/* Slack-style, hideable "full chat history" sidebar for a TownSquare embed on
   this blog. Standalone: not part of TownSquare (the widget has no such
   panel) or the crowd bot swarm (no browser-facing surface) — this is a
   page-side WebSocket tee with no backend dependency of its own. Pair with
   ts-history-panel.js, which creates the #ts-log-toggle/#ts-log markup these
   rules target. Uses this page's own palette vars (--rule, --paper, --brand).

   Toggle sits bottom-right, same side the panel slides in from, lifted clear
   of the widget's own reserved touch-toolbar strip (--ts-toolbar-reserve:
   80px, the docked composer + action buttons shown on touch devices) so the
   two pill-shaped controls don't visually stack. */
#ts-log-toggle {
  position: fixed; right: 16px; bottom: 100px; z-index: 2147483647;
  border: 1px solid var(--rule); background: var(--paper); border-radius: 999px;
  padding: 0.5rem 0.9rem; font: 600 13px "Inter", sans-serif; cursor: pointer;
  box-shadow: 0 4px 14px #00000014;
}
#ts-log {
  position: fixed; top: 0; right: 0; width: 340px; max-width: 90vw; height: 100vh;
  background: #fbfbfd; border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.22s ease; z-index: 2147483647;
  box-shadow: -8px 0 24px #0000000d;
}
#ts-log.open { transform: translateX(0); }
#ts-log header {
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule);
  font: 600 14px "Inter", sans-serif; display: flex;
  justify-content: space-between; align-items: center;
}
#ts-log .ts-x { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #0006; }
#ts-log-list { flex: 1; overflow-y: auto; padding: 0.7rem 0.85rem 2.5rem; }
#ts-log-list .ts-line { margin: 0 0 0.45rem; font-size: 12px; line-height: 1.4; }
#ts-log-list .ts-cont { margin: -0.18rem 0 0.45rem; } /* continuation of same speaker */
#ts-log-list .ts-who { font-weight: 600; }