/*
  The lead drawer on the admin portal (class.lead_drawer.php): the person card, the
  settings_row groups (global.css), the message thread, the composer in the footer, and the
  stacked edit / status drawers. px throughout — a rem is 10px on this site.
*/

.lead_drawer_container,
.lead_edit_container,
.lead_status_container
{
  --ld_ink: #1f2a2b;
  --ld_muted: #6b7c7d;
  --ld_faint: #9fb3b4;
  --ld_line: #d3e2e3;
  --ld_brand: #0f7777;
  --ld_brand_wash: #e2efef;
  color: var(--ld_ink);
  font-size: 15px;
}
.lead_drawer_container *,
.lead_edit_container *,
.lead_status_container * { box-sizing: border-box; }

.ld_body { padding: 18px 16px 28px; }
.ld_faint { color: var(--ld_faint); font-style: italic; }

/* ---- header: the pencil on the right ---- */

.ld_header_btn
{
  flex: none;
  margin-left: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.7);
  background: transparent;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.ld_header_btn:hover, .ld_header_btn:focus { background: rgba(255,255,255,0.15); color: white; outline: none; }

/* ---- the person ---- */

.ld_profile
{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: white;
  border: 1px solid var(--ld_line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06);
}
.ld_avatar
{
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ld_brand);
  color: white;
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ld_profile_text { min-width: 0; flex: 1; }
.ld_profile_name { font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ld_profile_line { font-size: 13.5px; color: var(--ld_muted); margin-top: 2px; }
.ld_profile_tags
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ld_status_pill
{
  display: inline-block;
  color: white;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.5;
}
.ld_added { font-size: 12px; color: var(--ld_faint); }

/* ---- rows ---- */

.ld_dot
{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.ld_row_action
{
  flex: none;
  margin-left: 10px;
  color: var(--ld_faint);
  font-size: 15px;
  padding: 6px;
}
.ld_row_action:hover { color: var(--ld_brand); }
.ld_notes_row .settings_row_sub { white-space: normal; line-height: 1.45; }
.ld_count
{
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ld_brand_wash);
  color: var(--ld_brand);
  font-size: 11px;
  text-align: center;
  letter-spacing: 0;
}

/* ---- the thread ---- */

.ld_thread { display: flex; flex-direction: column; gap: 12px; }
.ld_msg { max-width: 88%; }
.ld_msg_bubble
{
  background: white;
  border: 1px solid var(--ld_line);
  border-radius: 12px 12px 12px 3px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(11, 61, 64, 0.06);
}
.ld_msg_bubble img { max-width: 100%; }
.ld_msg_meta
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 4px;
  font-size: 11.5px;
  color: var(--ld_faint);
}
.ld_msg_stats
{
  border: 0;
  background: transparent;
  color: var(--ld_faint);
  padding: 2px 5px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.ld_msg_stats:hover { color: var(--ld_brand); }
.ld_empty
{
  padding: 22px 14px;
  text-align: center;
  color: var(--ld_faint);
  font-size: 13.5px;
  background: white;
  border: 1px dashed var(--ld_line);
  border-radius: 12px;
}

/* ---- the footer: the composer ---- */

.ld_foot
{
  flex: none;
  background: white;
  border-top: 1px solid var(--ld_line);
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
}
.ld_foot .ld_errors { margin: 0 0 10px; border-radius: 8px; }
.ld_compose { display: flex; flex-direction: column; gap: 8px; }
.ld_compose .form-control
{
  border: 1.5px solid var(--ld_line);
  border-radius: 8px;
  box-shadow: none;
  font-size: 15px;
  color: var(--ld_ink);
}
.ld_compose .form-control:focus { border-color: var(--ld_brand); box-shadow: none; }
.ld_compose .ld_subject { height: 40px; }
.ld_compose .ld_message { min-height: 76px; max-height: 220px; resize: none; }
.ld_compose .attachments_container { margin: 0; }
.ld_compose_row
{
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld_compose_row .ld_sender
{
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ld_muted);
}
.ld_attach
{
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid var(--ld_line);
  background: white;
  color: var(--ld_muted);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ld_attach:hover { color: var(--ld_brand); border-color: var(--ld_brand); }
.ld_send
{
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1.5px solid var(--ld_brand);
  background: var(--ld_brand);
  color: white;
  font-weight: 700;
}
.ld_send:hover, .ld_send:focus { background: #0b6060; border-color: #0b6060; color: white; outline: none; }
.ld_busy { opacity: 0.6; }

/* ---- the edit drawer ---- */

.ld_form { display: flex; flex-direction: column; gap: 8px; }
.ld_form_label
{
  font-size: 12px;
  font-weight: 700;
  color: #0f5e63;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 12px 0 0;
  padding-left: 4px;
}
.ld_form_label:first-child { margin-top: 0; }
.ld_form_row
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 420px)
{
  .ld_form_row { grid-template-columns: 1fr; }
}
.ld_form .form-control
{
  height: 44px;
  padding: 8px 12px;
  font-size: 16px;   /* 16px stops ios zooming the page on focus */
  color: var(--ld_ink);
  background: white;
  border: 1.5px solid var(--ld_line);
  border-radius: 8px;
  box-shadow: none;
}
.ld_form .form-control:focus { border-color: var(--ld_brand); box-shadow: none; }
.ld_form .ld_email_readonly { background: #f4f7f7; color: var(--ld_muted); }
.ld_form textarea.form-control { height: auto; min-height: 120px; resize: vertical; }
.lead_edit_container .ld_foot .ld_save
{
  height: 44px;
  border-radius: 8px;
  border: 1.5px solid var(--ld_brand);
  background: var(--ld_brand);
  color: white;
  font-weight: 700;
}

/* ---- the status drawer ---- */

.ld_status_pick.ld_on { background: #eaf4f4; }
.ld_status_check { flex: none; margin-left: 10px; color: var(--ld_brand); font-size: 18px; }