/* contact-panel.css — the identity card at the top of the conversation sidebar.
 *
 * Sized and coloured from the tokens the conversation redesign already uses, so
 * this reads as part of the panel rather than a widget dropped into it. Both
 * themes are defined here rather than inherited: the panel sits on a different
 * surface in each.
 */

/* Geometry copied from the section cards beside it, not chosen: same width,
   same 10px gap above, same 12px radius, same hairline and the same 1px
   shadow, and the inner padding of their header rows so the text starts on the
   same vertical line. A card 14px narrower than its neighbours reads as a
   mistake however good it looks on its own. */
.crm-idcard {
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--crm-card-line, #e7eaf0);
  border-radius: 8px;
  background: var(--crm-card-bg, #ffffff);
  box-shadow: 0 1px 2px rgba(29, 27, 28, .04);
}

.crm-idcard__top {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The channel mark, at the size the sidebar uses elsewhere. The icon classes
   come from channel-icons.css, so a mark added there works here for free. */
.crm-idcard__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.crm-idcard__titles {
  min-width: 0;
}

.crm-idcard__channel {
  font-size: 13px;
  font-weight: 600;
  color: var(--crm-card-ink, #1d1b1c);
  line-height: 1.3;
}

.crm-idcard__handle {
  font-size: 12px;
  color: var(--crm-ink);
  text-decoration: none;
}

.crm-idcard__handle:hover {
  text-decoration: underline;
}

/* Three facts on two lines rather than a table: the panel is 320px wide and a
   label column would leave no room for the values. */
.crm-idcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
}

.crm-fact {
  display: flex;
  gap: 5px;
  font-size: 12px;
  line-height: 1.5;
}

.crm-fact__label {
  color: var(--crm-card-muted, #5f6773);
}

.crm-fact__value {
  color: var(--crm-card-ink, #1d1b1c);
  font-weight: 600;
}

/* ---- the same person, elsewhere ---------------------------------------- */

.crm-also {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--crm-card-line, #e7eaf0);
}

.crm-also__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--crm-card-muted, #5f6773);
  margin-bottom: 7px;
}

.crm-also__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid var(--crm-card-line, #e7eaf0);
  border-radius: 8px;
  margin-bottom: 5px;
  text-decoration: none;
  color: inherit;
}

.crm-also__row:last-child {
  margin-bottom: 0;
}

.crm-also__row:hover {
  background: var(--crm-card-hover, #f5f7f0);
}

.crm-also__mark {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.crm-also__text {
  min-width: 0;
  flex: 1;
}

.crm-also__where {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--crm-card-ink, #1d1b1c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The confidence is printed rather than implied: "same name" is a guess, and an
   agent who cannot see that would treat it as a fact. */
.crm-also__sub {
  font-size: 11.5px;
  color: var(--crm-card-muted, #5f6773);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-also__go {
  color: var(--crm-card-muted, #5f6773);
  font-size: 16px;
  flex: none;
}

/* ---- dark ---------------------------------------------------------------- */

:root.dark .crm-idcard,
.dark .crm-idcard,
[data-theme="dark"] .crm-idcard {
  --crm-card-bg: #1b1e23;
  --crm-card-line: #2c3138;
  --crm-card-ink: #e8eaed;
  --crm-card-muted: #98a1ad;
  --crm-card-hover: #22262c;
}

:root.dark .crm-idcard__handle,
.dark .crm-idcard__handle,
[data-theme="dark"] .crm-idcard__handle {
  color: #8ab4f8;
}

/* ---- the latest note, shown in the card ---------------------------------- */

.crm-note {
  border: 1px solid var(--crm-card-line, #e7eaf0);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--crm-card-hover, #f5f7f0);
}

.crm-note__text {
  font-size: 12.5px;
  color: var(--crm-card-ink, #1d1b1c);
  line-height: 1.5;
  /* Four lines and an ellipsis. The full note is in the section below and in
     this element's title, so nothing is lost by stopping cleanly. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crm-note__by,
.crm-note__more {
  font-size: 11.5px;
  color: var(--crm-card-muted, #5f6773);
  margin-top: 4px;
}

/* The customer's own rep on the card (Crm::ContactOwner, owner 2026-10-04). */
.crm-owner { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(130, 140, 155, .18); font-size: 12px; }
.crm-owner__row { display: flex; align-items: center; gap: 8px; }
.crm-owner__pick {
  flex: 1; min-width: 0; height: 30px; margin: 0 !important; padding-block: 0; font-size: 12.5px;
  border-radius: 8px; border: 1px solid rgba(130, 140, 155, .3); background-color: transparent; outline: 0 !important;
}
.crm-owner__err { margin-top: 6px; color: var(--crm-alert-ink, #c8243b); line-height: 1.5; }
.crm-owner__log { margin-top: 6px; }
.crm-owner__log summary { cursor: pointer; color: rgb(var(--slate-11, 96 100 108)); width: max-content; }
.crm-owner__line { margin-top: 4px; line-height: 1.5; color: rgb(var(--slate-11, 96 100 108)); }