/* Карточка человека: место под аватар слева, имя и номер справа.

   Скруглённая карточка, а не строка на голом фоне: она называет
   того, чей это кабинет, и должна читаться как отдельная вещь,
   а не как заголовок списка. */

.identity {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Пустой круг — место под фотографию. Пока пустой намеренно:
   загрузку снимка сделаем отдельно, а место под неё должно стоять
   уже сейчас, иначе потом карточка подпрыгнет. */
.identity__photo {
  flex: none;
  width: 17.9cqw;
  height: 17.9cqw;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.identity__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.identity__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Роль под именем: тем же цветом, что кружок у номера. Клиент
   зелёный, бизнес золотой — цвет отвечает «в каком я кабинете». */
.identity__role {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
}

.identity__role--client { color: var(--role-client); }
.identity__role--business { color: var(--accent-text); }

.identity__id {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Кружок с человечком покрашен по роли: клиент зелёный, бизнес
   золотой. Цвет отвечает на вопрос «в каком я кабинете» раньше,
   чем прочитан заголовок. */
.identity__mark {
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.identity__mark .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

.identity__mark--client {
  background: var(--role-client);
  color: var(--on-role-client);
}

.identity__mark--business {
  background: var(--role-business);
  color: var(--on-accent);
}

.identity__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

/* Кнопка копирует ссылку на страницу. Значок без подписи: подпись
   заняла бы всю строку, а значок «два листа» понимают все. */
.identity__copy {
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}

.identity__copy .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.identity__copy:hover  { color: var(--accent-text); }
.identity__copy:active { background: var(--surface-2); }

/* ── Прежний вид: кружок с буквой и подпись под ним ──────────── */

.who {
  margin-top: var(--sp-4);
  text-align: center;
}

.who__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}

.who__since {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* Наведение только там, где есть мышь: на телефоне hover залипает
   после касания и оставляет кнопку подсвеченной. */
@media (hover: hover) {
  .identity__copy:hover {
    background: var(--surface-2);
    color: var(--accent-text);
  }
}