.screen-client-request[data-request-step="details"] [data-request-panel="followup"],
.screen-client-request[data-request-step="followup"] [data-request-panel="details"] {
  display: none;
}

.client-request-shell {
  width: min(820px, calc(100vw - 40px));
}

body.note-flow-modal-open #screen-note-request.is-active .client-request-shell {
  width: min(760px, calc(100vw - 36px));
  padding-top: 26px;
  padding-bottom: 24px;
}

#screen-note-request .note-flow-progress {
  margin-bottom: 16px;
}

body.note-flow-modal-open #screen-note-request.is-active .form-text {
  margin-bottom: 16px;
}

#screen-note-request .field,
#screen-note-request .field-grid {
  margin-bottom: 12px;
}

#screen-note-request .field-input {
  padding-top: 13px;
  padding-bottom: 13px;
}

.client-request-textarea {
  min-height: 82px;
  resize: vertical;
}

.field-label-optional {
  color: #7b849b;
  font-weight: 500;
}

.client-request-guard {
  margin-top: 2px;
}

body.note-flow-modal-open #screen-note-request.is-active .client-request-guard {
  margin-bottom: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
}

#screen-note-request .note-flow-actions {
  margin-top: 8px;
  padding-top: 12px;
}

.notes-category-group.is-client-requests {
  --request-accent: #147d76;
  --request-soft: #eaf8f5;
  --request-border: #cde8e3;
}

.notes-category-group.is-client-requests .notes-category-title-icon,
.note-client-request-heading-icon {
  color: var(--request-accent);
  background: var(--request-soft);
  border-color: var(--request-border);
}

.note-client-request-heading-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #cde8e3;
  border-radius: 8px;
}

.note-client-request-heading-icon svg {
  width: 17px;
  height: 17px;
}

.board-filter-option-icon.is-client-request {
  color: #147d76;
  background: #eaf8f5;
  border-color: #cde8e3;
}

.note-item.is-client-request {
  border-left-color: #36a397;
}

.note-client-request-heading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #153d3a;
  font-weight: 750;
}

.note-request-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #dce2ec;
  border-radius: 999px;
  background: #f6f8fb;
  color: #647086;
  font-size: 12px;
  font-weight: 750;
}

.note-request-status-badge.is-in-progress {
  border-color: #d9d2ff;
  background: #f1efff;
  color: #5748d8;
}

.note-request-status-badge.is-completed {
  border-color: #c9e8df;
  background: #eaf8f3;
  color: #14735f;
}

.note-client-request-body {
  display: grid;
  gap: 18px;
  padding: 4px 0 2px;
}

.note-client-request-main {
  display: grid;
  gap: 7px;
}

.note-client-request-type {
  color: #14264a;
  font-size: 20px;
  line-height: 1.25;
}

.note-client-request-copy {
  margin: 0;
  color: #596780;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.note-client-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-client-request-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e0e5ed;
  border-radius: 8px;
  background: #fbfcfe;
  color: #526079;
  font-size: 13px;
}

.note-client-request-chip strong {
  color: #1a2b4d;
  font-weight: 750;
}

.note-client-request-chip svg {
  width: 16px;
  height: 16px;
  color: #147d76;
}

.note-request-status-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(430px, 100%);
  overflow: hidden;
  border: 1px solid #dfe4ed;
  border-radius: 8px;
  background: #fff;
}

.client-request-status-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid #e4e8ef;
  background: transparent;
  color: #657188;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.client-request-status-button:last-child {
  border-right: 0;
}

.client-request-status-button:hover:not(:disabled) {
  background: #f5f7fb;
  color: #253858;
}

.client-request-status-button.is-active {
  background: #4f46ed;
  color: #fff;
}

.client-request-status-button.is-active[data-request-status="completed"] {
  background: #147d76;
}

.client-request-status-button:disabled {
  cursor: default;
}

.note-item.is-client-request.is-done .note-client-request-type,
.note-item.is-client-request.is-done .note-client-request-copy {
  color: #778296;
}

@media (max-width: 680px) {
  .client-request-shell {
    width: min(100% - 20px, 820px);
  }

  .note-client-request-type {
    font-size: 18px;
  }

  .note-request-status-control {
    width: 100%;
  }

  .client-request-status-button {
    padding-inline: 7px;
    font-size: 12px;
  }

  #screen-note-request .note-flow-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.note-flow-modal-open #screen-note-request.is-active .form-actions .form-button,
  #screen-note-request .note-flow-actions .text-button {
    width: 100%;
    min-width: 0;
  }
}