:root{
  --card-radius: 1rem;
}

.pre{
  white-space: pre-wrap;
  word-break: break-word;
}

.card{
  border: 0;
  border-radius: var(--card-radius);
}

.card.shadow-sm{
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06) !important;
}

.table > :not(caption) > * > *{
  vertical-align: middle;
}

.badge{
  font-weight: 600;
}

.kpi{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.kpi .kpi-item{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: .75rem 1rem;
  min-width: 180px;
}

.kpi .kpi-value{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.kpi .kpi-label{
  font-size: .85rem;
  opacity: .75;
}

.sla-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

@media (max-width: 576px){
  .container{ padding-left: 1rem; padding-right: 1rem; }
  .kpi .kpi-item{ min-width: 100%; }
}


/* Chat view */
.chat{ display:flex; flex-direction:column; gap:.75rem; padding:.25rem 0; }
.chat-row{ display:flex; }
.chat-row.left{ justify-content:flex-start; }
.chat-row.right{ justify-content:flex-end; }
.chat-bubble{
  max-width: 92%;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: .65rem .85rem;
  background: #fff;
}
.chat-row.right .chat-bubble{ background: rgba(13,110,253,.06); }
.chat-row.left .chat-bubble{ background: rgba(25,135,84,.06); }
.chat-head{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:baseline;
  margin-bottom:.35rem;
}
.chat-label{ font-weight:700; }
.chat-meta{ font-size:.8rem; color: rgba(0,0,0,.55); }
.chat-time{ margin-left:auto; font-size:.8rem; color: rgba(0,0,0,.55); }
.chat-body{ white-space:pre-wrap; word-break:break-word; }

/* Timeline */
.timeline{ list-style:none; padding-left:0; margin:0; }
.timeline-item{ position:relative; padding-left:1.5rem; margin-bottom:.75rem; }
.timeline-dot{
  position:absolute; left:.25rem; top:.45rem;
  width:.65rem; height:.65rem; border-radius:50%;
  background: rgba(13,110,253,.6);
}
.timeline-content{
  border-left: 2px solid rgba(0,0,0,.06);
  padding-left: .9rem;
}
.timeline-title{ font-weight: 700; }