/* Settings → Profile → Username and inbox. Reuses prof-card--details, prof-form-field and
   prof-btn; only the @ field, the live status, suggestion chips, the address row and the
   trusted-sender list live here. */
.prof-handle { min-width: 0; }
.prof-handle[hidden] { display: none; }
.prof-handle__form { display: grid; gap: 12px; max-width: 420px; }
.prof-handle__field { position: relative; display: block; }
.prof-handle__at {
  position: absolute;
  inset-block: 0;
  left: 14px;
  display: grid;
  place-items: center;
  color: var(--dash-text-muted);
  font: 400 16px/1 Inter, sans-serif;
  pointer-events: none;
}
.prof-form-field .prof-handle__field input { padding-left: 32px; }
.prof-handle__status { min-height: 18px; }
.prof-handle__status[data-tone="ok"] { color: var(--prof-text); }
.prof-handle__status[data-tone="error"] { color: #d97878; }
.prof-handle__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prof-handle__chips:empty { display: none; }
.prof-handle__form .prof-details-form__foot { margin-top: 0; }
.prof-handle__form .prof-details-form__foot[hidden] { display: none; }

.prof-handle__block { display: grid; gap: 8px; margin-top: 28px; }
.prof-handle__block > * { min-width: 0; }
.prof-handle__block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.prof-handle__label { margin: 0; color: var(--prof-text); font-size: 12px; font-weight: 500; line-height: 18px; }
.prof-handle__muted { margin: 0; color: var(--dash-text-muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.prof-handle__mono { color: var(--prof-text); }

.prof-handle__address {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 14px;
  background: var(--dash-inner-surface);
}
.prof-handle__address-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--prof-text);
  font: 500 15px/1.3 Inter, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.prof-handle__icon-btn {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dash-text-muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.prof-handle__icon-btn svg { width: 16px; height: 16px; }
.prof-handle__icon-btn:hover { background: var(--color-well-hover, var(--dash-surface-hover)); color: var(--prof-text); }
.prof-handle__icon-btn:disabled { opacity: .5; cursor: default; }

.prof-handle__senders { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.prof-handle__senders:empty { display: none; }
.prof-handle__sender {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 4px 0 12px;
  border-radius: 12px;
  color: var(--prof-text);
  font-size: 14px;
  transition: background-color 140ms ease;
}
.prof-handle__sender:hover { background: var(--dash-inner-surface); }
.prof-handle__sender > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-handle__tag { flex: none; padding-right: 10px; color: var(--dash-text-muted); font-size: 12px; }
.prof-handle__add { display: flex; gap: 8px; max-width: 420px; margin-top: 4px; }
.prof-handle__add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: var(--dash-inner-surface);
  color: var(--prof-text);
  font: 400 14px/1 Inter, sans-serif;
}
.prof-handle__add-input::placeholder { color: color-mix(in srgb, var(--dash-text-muted) 55%, transparent); }
.prof-handle__add-input:focus-visible { box-shadow: 0 0 0 2px var(--dash-text-muted); }

/* In the account settings grid: under Personal details, left column; one column on narrow screens. */
.acct-settings-preview__content--profile > .prof-handle { grid-column: 1; grid-row: 2; }
@media (max-width: 720px) {
  .acct-settings-preview__content--profile > .prof-handle { grid-column: auto; grid-row: auto; }
}