/*
  Feedback from the domestic help: her notes as written with the family's answer, the photo strip, the note form
  and the pills in the work mode, the answer controls on the visit card and the "ging nicht" rows of the start page.
*/

.hw-feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hw-work-feedback {
  flex-basis: 100%;
  padding-left: 56px;
}

.hw-feedback-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  border-left: 3px solid var(--hw-house, var(--bsft-color-primary));
  background: var(--hw-surface-2);
}

.hw-feedback-note-text {
  margin: 0;
  font-size: 14px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.hw-feedback-answer {
  font-size: 12.5px;
  color: var(--bsft-color-muted);
  overflow-wrap: anywhere;
}

/* --- photos --------------------------------------------------------------------------- */

.hw-feedback-photos {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.hw-feedback-photo {
  position: relative;
  flex: none;
}

.hw-feedback-photo img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--hw-surface-2);
}

.hw-feedback-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
}

.hw-feedback-photo-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hw-feedback-photo-pick .hw-icon {
  width: 16px;
  height: 16px;
}

.hw-feedback-photo-pick.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* --- note and reply forms --------------------------------------------------------------- */

.hw-feedback-form,
.hw-feedback-reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hw-feedback-reply {
  flex-direction: row;
}

.hw-feedback-form-actions {
  display: flex;
  gap: 8px;
}

.hw-feedback-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--bsft-color-border);
  background: var(--bsft-color-surface);
  color: var(--bsft-color-text);
  font: inherit;
  resize: vertical;
}

.hw-feedback-answerable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- visit card and start page ---------------------------------------------------------- */

.hw-visit-outcome {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.hw-visit-feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.hw-visit-chore {
  flex-wrap: wrap;
}

.hw-visit-chore-feedback {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 6px;
}

.hw-chip.is-crit {
  background: var(--bsft-color-danger-surface);
  color: var(--bsft-color-danger);
  border-color: transparent;
}

.hw-today-np .hw-today-row-text b {
  display: block;
}

.hw-today-np-reason {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--bsft-color-muted);
}

.hw-today-visit .hw-feedback-note {
  margin-top: 8px;
}