.chat-bubble {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  min-width: 3.5rem; border: 0; border-radius: 999px; padding: .8rem 1rem;
  color: white; background: #2463eb; box-shadow: 0 .3rem 1rem #0005;
}
.chat-badge {
  position: absolute; top: -.4rem; right: -.35rem; min-width: 1.35rem;
  padding: .12rem .3rem; border-radius: 1rem; color: white; background: #c62828;
  font-size: .7rem;
}
.chat-panel {
  position: fixed; right: 1rem; bottom: 4.9rem; z-index: 20;
  width: min(23rem, calc(100vw - 2rem)); height: min(32rem, calc(100vh - 7rem));
  border: 1px solid #8886; border-radius: .6rem; background: Canvas;
  box-shadow: 0 .5rem 2rem #0005;
}
.chat-panel:not([hidden]) { display: flex; flex-direction: column; }
.chat-header {
  display: flex; justify-content: space-between; padding: .65rem .8rem;
  border-bottom: 1px solid #8885;
}
.chat-header button { min-height: auto; border: 0; background: transparent; font-size: 1.4rem; }
.chat-log { flex: 1; overflow-y: auto; padding: .6rem; }
.chat-message { margin: 0 0 .65rem; padding-left: .55rem; border-left: 3px solid var(--chat-color); }
.chat-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.chat-message p { margin: .15rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-parent { overflow: hidden; color: GrayText; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.chat-reply-button { min-height: auto; padding: 0; border: 0; color: LinkText; background: transparent; font-size: .75rem; }
.chat-reply {
  display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .6rem;
  border-top: 1px solid #8885; color: GrayText; font-size: .78rem;
}
.chat-reply span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-reply button { min-height: auto; }
.chat-form { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid #8885; }
.chat-form textarea { flex: 1; min-width: 0; min-height: 2.5rem; resize: none; }
@media (max-width: 480px) {
  .chat-panel { right: .5rem; bottom: 4.5rem; width: calc(100vw - 1rem); }
  .chat-bubble { right: .5rem; bottom: .5rem; }
}