/* Layout */
html, body { height: 100%; }
#app-wrapper { height: calc(100vh - 0px); }
@media (max-width: 767.98px) {
  #app-wrapper { height: calc(100vh - 56px); padding-top: 56px; }
}

/* Sidebar */
.sidebar {
  width: 220px;
  min-height: 100vh;
  flex-shrink: 0;
}
.sidebar .nav-link {
  color: rgba(255,255,255,.75);
  padding: .5rem 1rem;
  border-radius: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.sidebar .nav-link .badge {
  margin-left: auto;
}

/* Chat bubbles */
.update-bubble {
  max-width: 80%;
  border-radius: .75rem;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.update-bubble.staff-bubble {
  margin-left: auto;
  background: #cfe2ff;
}
.update-bubble.customer-bubble {
  margin-right: auto;
  background: #f0f0f0;
}
.update-bubble.internal-bubble {
  margin-left: auto;
  background: #fff3cd;
  border: 1px solid #ffc107;
}
.update-bubble.new-update {
  border-left: 4px solid #0d6efd;
}
.update-meta {
  font-size: .8rem;
  color: #6c757d;
  margin-top: .35rem;
}
.status-badge {
  font-size: .75rem;
  font-style: italic;
  color: #6c757d;
}

/* Attachment thumbnails */
.att-thumb { max-height: 120px; cursor: pointer; border-radius: .25rem; }
.att-thumb:hover { opacity: .85; }

/* Staff timer */
#staff-timer { font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Refresh status */
#refresh-status { font-size: .8rem; color: #6c757d; }

/* Inactive user */
.user-inactive { color: #adb5bd; }

/* Priority colours */
.priority-emergency_outage { color: #dc3545; font-weight: 600; }
.priority-urgent_problem   { color: #fd7e14; }
.priority-normal_problem   { color: inherit; }
.priority-development      { color: #6c757d; }

/* Ticket list */
.ticket-row td { vertical-align: middle; }
.ticket-row.has-new { font-weight: 600; }

/* Preserve newlines in update body text */
.preserve-ws { white-space: pre-wrap; word-break: break-word; }