:root {
  --hps-accent: #1b4f72;
  --hps-note: #f4e8c1;
  --hps-customer: #e8f1f8;
  --hps-agent: #eaf6ea;
}

.thread-item.thread-customer { background: var(--hps-customer); }
.thread-item.thread-message,
.thread-item.thread-agent { background: var(--hps-agent); }
.thread-item.thread-note { background: var(--hps-note); border-left: 4px solid #c9a227; }
.thread-body img { max-width: 100%; height: auto; }
.thread-body a { word-break: break-word; }

.small-box {
  border-radius: 0.35rem;
  padding: 1rem;
  color: #fff;
  background: var(--hps-accent);
}
.small-box .inner h3 { font-size: 1.75rem; margin: 0; }
.small-box .inner p { margin: 0; opacity: 0.9; }

@media (max-width: 768px) {
  .table-responsive table { font-size: 0.9rem; }
}