body { background: #f7f7f8; }

.chat-card,
.user-card {
  min-height: 520px;
}

@media (min-width: 992px) {
  .chat-card,
  .user-card {
    height: 80vh;
    max-height: 900px;
  }

  .user-sticky {
    position: sticky;
    top: 1rem;
  }
}

.chat-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 220px;
}

.user-json {
  overflow: auto;
  white-space: pre;
  margin: 0;
}

.msg { max-width: 80%; }
.msg.me { margin-left: auto; }
.msg .time { font-size: .75rem; opacity: .7; }

.spinner-dots::after {
  content: "…";
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.small-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8rem;
}