/* The profile's ways to reach (contacts/_handle_row) and their label step (people/handles/_label_field). */

.cs-handle-label { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.cs-handle-label__suggestions { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
.cs-handle-label__hint { margin: 0; font-size: var(--ds-info-label, 0.8125rem); line-height: 1.4; color: var(--ds-text-muted); }
.cs-handle-label__hint strong { font-weight: 500; color: var(--ds-text); overflow-wrap: anywhere; }

/* A label opens its step: it reads as the text it is, with a hover to show it can be clicked. */
.cs-handle-row__label {
  align-self: flex-start; max-inline-size: 100%; margin-inline: -0.25rem; padding: 0 0.25rem;
  border: 0; border-radius: 0.375rem; background: none; font: inherit; font-size: 13px; color: var(--ds-text-muted);
  text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.cs-handle-row__label:hover { background: var(--ds-fill-hover, var(--bg-subtle)); color: var(--ds-text); }
.cs-handle-row__label:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

/* Without a label the kind stands in, fainter, so it does not pass for one. */
.cs-handle-row__kind { font-size: 13px; color: var(--ds-text-muted); opacity: 0.6; }

/* On the profile the number is never cut: it takes the line, and the label and the badge share the one under it. */
.cs-handle-row__value { overflow-wrap: anywhere; }
.cs-handle-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); min-inline-size: 0; }
.cs-handle-row__tags .cs-handle-row__label { align-self: auto; }
/* No label yet: a quiet way to add one, which a typed label is never mistaken for. */
.cs-handle-row__label--add { display: inline-flex; align-items: center; gap: 3px; opacity: 0.7; }
.cs-handle-row__label--add:hover { opacity: 1; }
.cs-handle-row > .ds-menu-trigger { flex: none; align-self: flex-start; }

/* The WhatsApp state is one line of the row's detail: "sem WhatsApp · Tem WhatsApp sim", never two columns. */
:where(html[data-visual="v5"]) .cs-handle-row .cs-handle-meta { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); }
:where(html[data-visual="v5"]) .cs-handle-row .cs-handle-meta__check { flex-wrap: wrap; gap: 0 var(--ds-space-1); white-space: nowrap; }
:where(html[data-visual="v5"]) .cs-handle-row .cs-handle-meta__undo {
  padding: 0 0.25rem; margin-inline: -0.25rem 0; border-radius: 0.375rem;
  color: var(--ds-text); font-weight: var(--ds-weight-medium); text-decoration: none; white-space: nowrap;
}
:where(html[data-visual="v5"]) .cs-handle-row .cs-handle-meta__undo::before { content: "· "; color: var(--ds-text-muted); font-weight: var(--ds-weight-regular); }
:where(html[data-visual="v5"]) .cs-handle-row .cs-handle-meta__undo:hover { background: var(--ds-fill-hover); }

/* Moving one: the people found scroll on their own, so the search and Cancelar stay in sight. */
.cs-profile-modal .cs-modal__list.cs-handle-move__results { max-block-size: min(22rem, 45dvh); overflow-y: auto; }

/* The record's own number cannot be removed, only moved: its Remover stays, faint, to say why on hover. */
.cs-handle-row__locked { cursor: default; }