/* Prospect diagnosis, step 4: the message drawn as a chat (js/lib/chat-preview.js).
   WhatsApp-like on purpose, with neutral greens of our own and no WhatsApp
   logo or assets. The outgoing bubble reuses the view's --nd-wa colors
   (css/new-diagnosis.css), so the entry screen and this step match. */
#viewNewdiagnosis {
  --cp-head: #2c4a40; --cp-head-ink: #f3f7f2; --cp-wall: #eceee6; --cp-dot: rgba(44, 74, 64, .07);
  --cp-day: #ffffffd9; --cp-day-ink: #5b6658; --cp-bar: #f6f7f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #viewNewdiagnosis {
    --cp-head: #1d2b26; --cp-head-ink: #e3eedc; --cp-wall: #121815; --cp-dot: rgba(227, 238, 220, .05);
    --cp-day: #1d2621; --cp-day-ink: #93a58c; --cp-bar: #18201c;
  }
}
:root[data-theme="dark"] #viewNewdiagnosis {
  --cp-head: #1d2b26; --cp-head-ink: #e3eedc; --cp-wall: #121815; --cp-dot: rgba(227, 238, 220, .05);
  --cp-day: #1d2621; --cp-day-ink: #93a58c; --cp-bar: #18201c;
}

/* Who the agency writes to: one short optional field above the message. */
#viewNewdiagnosis .nd-contact { max-width: 360px; margin: 14px 0 16px; }
#viewNewdiagnosis .nd-contact label { display: block; margin-bottom: 8px; font: 600 14px/1.2 var(--ui-font); color: var(--ui-ink); }
#viewNewdiagnosis .nd-contact label .nd-muted { font-weight: 400; font-size: 12.5px; }

/* The block: editor and chat side by side when there's room, stacked when not. */
#viewNewdiagnosis .nd-ready--chat { container-type: inline-size; }
#viewNewdiagnosis .nd-ready-in { display: grid; gap: 22px; }
#viewNewdiagnosis .nd-ready-ed { min-width: 0; }
@container (min-width: 700px) {
  #viewNewdiagnosis .nd-ready-in { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
}
#viewNewdiagnosis .nd-acts-links { display: inline-flex; gap: 18px; align-items: center; }
#viewNewdiagnosis .nd-wa-open { display: inline-flex; align-items: center; gap: 7px; }
/* A plain chat-bubble glyph in the text color: no third-party logo. */
#viewNewdiagnosis .nd-wa-open::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 2.2c3.3 0 5.8 2.3 5.8 5.2S11.3 12.6 8 12.6c-.8 0-1.6-.1-2.3-.4L2.4 13.6l1-2.7C2.6 10 2.2 8.8 2.2 7.4 2.2 4.5 4.7 2.2 8 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 2.2c3.3 0 5.8 2.3 5.8 5.2S11.3 12.6 8 12.6c-.8 0-1.6-.1-2.3-.4L2.4 13.6l1-2.7C2.6 10 2.2 8.8 2.2 7.4 2.2 4.5 4.7 2.2 8 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The chat. */
#viewNewdiagnosis .cp { margin: 0; min-width: 0; }
#viewNewdiagnosis .cp-label { margin: 0 0 8px; font: 500 12.5px/1.2 var(--ui-font); color: var(--ui-ink-2); }
#viewNewdiagnosis .cp-frame {
  border: 1px solid var(--ui-line); border-radius: 16px; overflow: hidden; background: var(--cp-wall);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12);
}
#viewNewdiagnosis .cp-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cp-head); color: var(--cp-head-ink); }
#viewNewdiagnosis .cp-back { width: 9px; height: 14px; flex: none; opacity: .85; }
#viewNewdiagnosis .cp-av {
  position: relative; width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  background: #fff; display: grid; place-items: center;
}
#viewNewdiagnosis .cp-av span { font: 600 14px/1 var(--ui-font); color: var(--cp-head); }
#viewNewdiagnosis .cp-av img { position: absolute; inset: 6px; width: 20px; height: 20px; }
#viewNewdiagnosis .cp-who { display: grid; min-width: 0; line-height: 1.2; }
#viewNewdiagnosis .cp-who b { font: 600 14px/1.25 var(--ui-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewNewdiagnosis .cp-who small { font-size: 11.5px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#viewNewdiagnosis .cp-wall {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 14px 12px 16px; min-height: 190px;
  background-image: radial-gradient(var(--cp-dot) 1px, transparent 1.2px); background-size: 14px 14px;
}
#viewNewdiagnosis .cp-day {
  align-self: center; font: 500 11px/1 var(--ui-font); color: var(--cp-day-ink); background: var(--cp-day);
  padding: 5px 9px; border-radius: 7px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
#viewNewdiagnosis .cp-out {
  position: relative; max-width: 88%; background: var(--nd-wa); color: var(--nd-wa-ink);
  border-radius: 10px 3px 10px 10px; padding: 7px 10px 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
/* The little tail on the bubble's top right corner. */
#viewNewdiagnosis .cp-out::after {
  content: ""; position: absolute; top: 0; right: -7px; width: 8px; height: 10px; background: var(--nd-wa);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* The link card inside the bubble, as chat apps draw it from the page's
   Open Graph tags: image on top, title, one line, the domain. */
#viewNewdiagnosis .cp-card { margin: -3px -6px 7px; border-radius: 7px; overflow: hidden; background: rgba(0, 0, 0, .05); }
#viewNewdiagnosis .cp-card[hidden] { display: none; }
#viewNewdiagnosis .cp-out:has(.cp-card:not([hidden])) { width: 88%; }
#viewNewdiagnosis .cp-card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
#viewNewdiagnosis .cp-card-t { display: grid; gap: 2px; padding: 7px 9px 8px; }
#viewNewdiagnosis .cp-card-t b { font: 600 13px/1.3 var(--ui-font); }
#viewNewdiagnosis .cp-card-t span { font-size: 12px; line-height: 1.35; opacity: .8; }
#viewNewdiagnosis .cp-card-t small { font-size: 11.5px; opacity: .6; }
#viewNewdiagnosis .cp-text { margin: 0; font-size: 13.5px; line-height: 1.42; overflow-wrap: anywhere; }
#viewNewdiagnosis .cp-text a { color: var(--nd-wa-link); text-decoration: underline; text-underline-offset: 2px; }
#viewNewdiagnosis .cp-meta {
  display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px;
  font: 10.5px/1 var(--ui-mono); color: var(--nd-wa-meta);
}

#viewNewdiagnosis .cp-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--cp-bar); border-top: 1px solid var(--ui-line); }
#viewNewdiagnosis .cp-input { flex: 1; height: 30px; border-radius: 15px; background: var(--ui-paper); border: 1px solid var(--ui-line); }
#viewNewdiagnosis .cp-send {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cp-head); color: var(--cp-head-ink); flex: none;
}
#viewNewdiagnosis .cp-send svg { width: 13px; height: 13px; margin-left: -1px; }
#viewNewdiagnosis .cp-note { margin: 8px 0 0; font-size: 12px; color: var(--ui-ink-3); }

/* Phone: the chat comes after the buttons, full width. */
@media (max-width: 560px) {
  #viewNewdiagnosis .nd-ready--chat .nd-acts { gap: 10px 14px; }
  #viewNewdiagnosis .nd-ready--chat .nd-acts :is(.nd-btn, .nd-wa-open) { flex: 1 1 100%; justify-content: center; text-align: center; }
  #viewNewdiagnosis .nd-acts-links { flex: 1 1 100%; justify-content: center; padding-top: 4px; }
  #viewNewdiagnosis .cp-wall { min-height: 0; }
}