/* Conversations › thread rows (public/conversation-activity-row.js), shared by
   the inbox thread and the contact record's centre panel. GHL's chrome from
   crm/conversations-new-ui build 2962. */

/* day pills */
.cr-day { display: flex; justify-content: center; margin: 14px 0 10px; }
.cr-day-pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 12px; font-size: 12px; font-weight: 500; color: #475467;
}

/* activity rows: a white pill, icon, sentence, Details, date */
.cr-act { display: flex; justify-content: center; margin: 8px 0; min-width: 0; }
.cr-act-pill {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  background: var(--surface); border: 1px solid #e4e7ec; border-radius: 16px; padding: 4px 12px;
  font-size: 13px; color: #344054;
}
.cr-act-ico { display: inline-flex; color: #667085; flex: none; }
.cr-act-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-act-text strong { font-weight: 600; color: #101828; }
.cr-tone-won { color: #039855 !important; }
.cr-tone-lost { color: #d92d20 !important; }
.cr-act-details {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: #004eeb;
}
.cr-act-details:hover { text-decoration: underline; }
.cr-act-when { flex: none; font-size: 13px; color: #667085; }

/* bubbles: the sender badge at the corner, time and ⋮ under */
.cr-bubble-holder { position: relative; max-width: 100%; }
.msg.out .cr-bubble-holder { padding-right: 12px; }
.cr-sender {
  position: absolute; right: 0; bottom: -6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
  background: #f2f4f7; color: #475467; border: 2px solid var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.cr-sender-ai { background: #f4ebff; color: #7f56d9; }
.cr-sender-automation { background: #ecfdf3; color: #027a48; }
.cr-more, .cr-fb-btn {
  border: 0; background: none; cursor: pointer; padding: 2px; border-radius: 4px;
  display: inline-grid; place-items: center; color: #98a2b3;
}
.cr-more:hover, .cr-fb-btn:hover { background: #f2f4f7; color: #344054; }
.cr-ai-fb { display: inline-flex; gap: 2px; }
.cr-fb-btn.on { color: #7f56d9; background: #f4ebff; }

/* email cards */
.cr-email {
  margin: 10px 0; border: 1px solid #e4e7ec; border-radius: 10px; background: var(--surface);
  overflow: hidden; max-width: 100%;
}
.cr-email-head {
  display: flex; align-items: center; gap: 4px; padding: 10px 12px 6px; cursor: pointer;
}
.cr-email-subject { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-email-ico {
  border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 6px;
  display: inline-grid; place-items: center; color: #667085;
}
.cr-email-ico:hover { background: #f2f4f7; color: #344054; }
.cr-email-row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 12px 10px; cursor: pointer; }
.cr-email.open .cr-email-row { cursor: default; }
.cr-email-av {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: #e0eaff; color: #3538cd;
}
.cr-email.out .cr-email-av { background: #f4ebff; color: #6941c6; }
.cr-email-badge {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; background: #155eef; color: #fff; border: 2px solid var(--surface);
}
.cr-email-who { flex: 1; min-width: 0; }
.cr-email-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #344054; }
.cr-email-preview { font-size: 13px; color: #667085; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-email-right { display: flex; align-items: center; gap: 2px; flex: none; }
.cr-email-time { font-size: 12px; color: #667085; margin-right: 4px; }
.cr-email-full { padding: 0 12px 12px 54px; display: grid; gap: 10px; }
.cr-email:not(.open) .cr-email-full { display: none; }
.cr-email-lines { font-size: 12.5px; color: #667085; display: grid; gap: 2px; }
.cr-email-text { font-size: 13.5px; line-height: 1.55; color: #344054; white-space: pre-wrap; word-break: break-word; }
.cr-email-frame { width: 100%; min-height: 120px; border: 0; background: #fff; }
.cr-email-modal-bg {
  position: fixed; inset: 0; z-index: 210; background: rgba(16, 24, 40, .45);
  display: grid; place-items: center; padding: 24px;
}
.cr-email-modal {
  width: min(760px, 100%); max-height: 88vh; overflow: auto; background: var(--surface);
  border-radius: 12px; box-shadow: 0 20px 40px rgba(16, 24, 40, .2);
}
.cr-email-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cr-email-modal .cr-email { margin: 0; border: 0; border-radius: 0; }

/* scroll to latest: GHL's round 28px "Scroll to Bottom", above the composer */
.cr-latest-holder { position: relative; height: 0; z-index: 3; }
.cr-latest {
  position: absolute; right: 8px; bottom: 10px;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: #344054; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 8px rgba(16, 24, 40, .12);
}
.cr-latest:hover { background: #f9fafb; }
.cr-latest[hidden] { display: none; }

/* grouping: a continued bubble sits close under the one before */
.msg.cr-bubble-row { margin-bottom: 12px; }
.msg.cr-bubble-row.cr-cont { margin-bottom: 2px; }
.cr-ai-label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #7f56d9; margin-bottom: 3px; }
.cr-bubble-foot { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.msg.out .cr-bubble-foot { justify-content: flex-end; padding-right: 12px; }
.cr-meta-row { margin-top: 0; gap: 6px; font-size: 11.5px; color: #667085; }
.cr-meta-ch { display: inline-flex; align-items: center; gap: 3px; }
.cr-meta-sender { font-weight: 500; color: #475467; }
.cr-meta-time { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cr-meta-time:hover { text-decoration: underline; }
.cr-meta-status { display: inline-flex; align-items: center; gap: 3px; }
.cr-meta-status--confirmed { color: #039855; }
.cr-meta-status--failed { color: #d92d20; }
.cr-fb-btn[hidden] { display: none; }
.cr-fb-btn[aria-pressed="true"] { color: #7f56d9; background: #f4ebff; }

/* email extras */
.cr-email-dir { display: inline-flex; color: #98a2b3; }
.cr-email-wf { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #ecfdf3; color: #027a48; }
.cr-email-status { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 999px; background: #f2f4f7; color: #475467; }
.cr-email-status.cr-meta-status--confirmed { background: #ecfdf3; color: #039855; }
.cr-email-status.cr-meta-status--failed { background: #fef3f2; color: #d92d20; }
.cr-email-files { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; color: #667085; font-weight: 500; }
.cr-email-lines { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12.5px; color: #667085; }
.cr-email-lines dt { font-weight: 600; color: #475467; }
.cr-email-lines dd { margin: 0; word-break: break-word; }
.cr-email-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-email-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: #344054; cursor: pointer;
}
.cr-email-act:hover { background: #f9fafb; }
.cr-email-av.cr-sender-ai { background: #f4ebff; color: #7f56d9; }