/* Housekeeper Assist portal — Attention screen (revamp/screenshots/04-needs-attention.jpg).
   Uses the hk- kit in src/index.css; only what that kit lacks lives here. */
.na-hk-list { display: flex; flex-direction: column; gap: 18px; }
.na-hk-card--done { opacity: .8; }
.na-hk-card .hk-card-head { align-items: flex-start; }
.na-hk-card .avatar.op-photo { overflow: hidden; }
.na-hk-name { font-size: 13.5px !important; }
.na-hk-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-top: 6px; }
.na-hk-body { display: flex; gap: 14px; align-items: flex-start; }
.na-hk-text { flex: 1; min-width: 0; }
.na-hk-title { font-size: 17px; font-weight: 650; color: var(--hk-ink); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: -.2px; }
.na-hk-details { font-size: 12.5px; color: var(--hk-muted); margin: 8px 0 0; white-space: pre-wrap; line-height: 1.55; }
.na-hk-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.na-hk-actions .hk-textbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.na-hk-confirm { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--hk-ink); }
.na-hk-tabcount { margin-left: 6px; font-size: 10.5px; font-weight: 700; background: var(--hk-mint); color: var(--hk-teal); border-radius: 9px; padding: 1px 6px; }

/* "View & reply": the conversation, opened in the card */
.na-hk-convo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hk-line); }
.na-hk-muted { font-size: 12.5px; color: var(--hk-muted); margin: 4px 0 12px; }
.na-hk-bubble { margin: 4px 0 12px auto; max-width: 80%; width: fit-content; background: var(--hk-mint); color: var(--hk-deep); border-radius: 10px 10px 2px 10px; padding: 10px 13px; font-size: 13px; white-space: pre-wrap; }
.na-hk-bubble small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--hk-muted); }
.na-hk-reply { display: flex; flex-direction: column; gap: 8px; }
.na-hk-reply textarea { width: 100%; resize: vertical; font: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid #dfe6d9; border-radius: 7px; color: var(--hk-ink); outline: none; background: #fff; }
.na-hk-reply textarea:focus { border-color: var(--hk-teal); box-shadow: 0 0 0 3px rgba(18,92,88,.1); }
.na-hk-reply-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.na-hk-card .na-photo { width: 84px; height: 84px; }
.na-hk-list + .hk-notice { margin-top: 22px; }
.hk-notice svg { flex: none; margin-top: 1px; }

@media (max-width: 768px) {
  .na-hk-body { flex-direction: column; }
  .na-hk-card .hk-card-head { flex-wrap: wrap; }
  .na-hk-pills { padding-top: 0; }
}