body {
  background: #f7f7f5;
}

.navbar {
  border-bottom: 1px solid #e6e2dc;
}

.page-shell {
  max-width: 1120px;
}

.portal-card {
  color: #212529;
}

.portal-card[href]:hover {
  border-color: #b8c5d6 !important;
  box-shadow: 0 0.35rem 1rem rgba(33, 37, 41, 0.08);
}

.portal-card-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.portal-card-body {
  color: #495057;
  min-height: 3rem;
}

.portal-card-meta {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.table td,
.table th {
  vertical-align: middle;
}

.status-pill {
  display: inline-block;
  min-width: 3.75rem;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-yes {
  background: #d7f0df;
  color: #11602c;
}

.status-no {
  background: #f7d9d9;
  color: #8a1f1f;
}

.status-maybe {
  background: #fff1c7;
  color: #765400;
}

.status-unanswered {
  background: #e9ecef;
  color: #495057;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.markdown-body h1:first-child,
.markdown-body h2:first-child,
.markdown-body h3:first-child {
  margin-top: 0;
}

.markdown-body p:last-child,
.markdown-body ul:last-child,
.markdown-body ol:last-child {
  margin-bottom: 0;
}

.message-timeline {
  display: grid;
  gap: 0.75rem;
}

.message-row {
  display: flex;
}

.message-row-own {
  justify-content: flex-end;
}

.message-bubble {
  max-width: min(42rem, 100%);
}

.message-row-own .message-bubble {
  background: #eef6f2 !important;
  border-color: #c9dfd5 !important;
}

.message-body {
  white-space: pre-wrap;
}

@media (max-width: 576px) {
  .nav-shell {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav-actions {
    align-items: stretch !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
    width: 100%;
  }

  .nav-actions .btn,
  .nav-actions form,
  .nav-actions form .btn {
    width: 100%;
  }

  .page-heading,
  main > .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.75rem;
  }

  .page-shell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .portal-card-body {
    min-height: auto;
  }

  .table {
    font-size: 0.875rem;
  }

  .table td,
  .table th {
    white-space: nowrap;
  }

  .table form.row {
    min-width: 18rem;
  }
}