/* ==========================================================================
   Contacts — карточка контакта в ленте и окно «Поделиться контактом».
   Использует токены из style.css; своей палитры не заводит, поэтому светлая
   и тёмная темы получаются сами.
   ========================================================================== */

/* ---- карточка в пузыре --------------------------------------------------
   Пузырь-хозяин получает класс wk-host (work.css, общий с задачами и
   геопозицией): он снимает фон и отступы, иначе акцентный градиент
   исходящего покрасил бы карточку и кнопки в ней перестали бы читаться. */
/* Ширина задана явно: пузырь сжимается по содержимому, и с одним min-width
   карточка ужималась до имени, а «Написать» переносилось по буквам.
   max-width:100% отдаёт её узкому пузырю на телефоне. */
.ct-card{
  width:272px;max-width:100%;box-sizing:border-box;
  border-radius:var(--radius);background:var(--panel-2);
  border:1px solid var(--border);padding:10px 12px;margin:2px 0 4px;
  cursor:pointer;transition:border-color .15s;
}
.ct-card:hover{border-color:var(--accent-glow)}
/* Своя карточка — тёплая подложка и акцентная кромка, как .wk-card/.geo-card. */
.msg-row.out .ct-card{
  background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--panel-2);
  border-color:var(--accent-glow);
}
.ct-head{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;
  color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
.ct-ico{font-size:14px;line-height:1}
.ct-who{display:flex;align-items:center;gap:10px;min-width:0;border-radius:10px}
.ct-who:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-who .ava{width:46px;height:46px;font-size:17px}
.ct-body{min-width:0;flex:1}
.ct-name{display:flex;align-items:center;gap:5px;min-width:0;font-weight:600;line-height:1.3}
.ct-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ct-sub{
  margin-top:1px;color:var(--text-2);font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ct-self{color:var(--accent)}
/* Светлая тема: яркий --accent на светлой подложке карточки даёт ≈3:1, а
   мелкому тексту нужно 4,5:1. --accent-deep — ≈4,5:1 на обычной подложке, но
   на тёплой подложке своей карточки и его мало (≈4:1), поэтому где браузер
   умеет color-mix — ещё чуть темнее (≥5:1 к обеим), как --wk-ok в work.css.
   В тёмной теме --accent и так ≥5:1. */
html[data-theme="light"] .ct-self{color:var(--accent-deep)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  html[data-theme="light"] .ct-self{color:color-mix(in srgb,var(--accent-deep) 85%,#000)}
}
.ct-actions{display:flex;gap:6px;margin-top:10px}
.ct-actions .btn{
  flex:1 1 0;min-width:0;padding:7px 10px;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Тень основной кнопки внутри маленькой карточки слишком тяжёлая. */
.ct-actions .btn-primary{box-shadow:none}
/* «переслано» над своей карточкой. Пересланный контакт остаётся карточкой, а
   wk-host снимает с пузыря акцентный фон — подпись же по .msg-row.out .b-fwd
   (style.css) почти белая под этот фон и на светлой ленте пропадала. Над
   карточкой — обычный вторичный цвет, как у входящих. Правило по wk-host, не
   по .ct-card: пересланная геопозиция (тоже карточка) страдала тем же. */
.msg-row.out .bubble.wk-host .b-fwd{color:var(--text-2)}

/* ---- окно «Поделиться контактом» --------------------------------------- */
.ct-share .ct-card{width:auto;max-width:none;margin:0 0 10px;cursor:default}
.ct-share .ct-card:hover{border-color:var(--border)}
.ct-share-list{max-height:min(46vh,360px)}
.ct-note{padding:6px 12px 10px;color:var(--muted);font-size:13px}

/* ---- профиль: «Написать сообщение» и «Поделиться» рядом ----------------- */
.ct-profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ct-profile-actions .btn{flex:1 1 140px;padding:12px}