/* Чат: «персонаж пишет первым» — карточка «Пусть {Имя} пишет тебе первой» внутри ленты
   (screens/chat/writeAccessCard.js). Подключается из chat.css (@import). */

.wa-card {
  position: relative;
  align-self: center;
  display: flex; gap: 12px; align-items: flex-start;
  width: min(100%, 440px);
  margin: 16px 0 4px;
  padding: 14px 44px 14px 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 45, 120, 0.16), rgba(139, 92, 246, 0.16)), var(--card);
  border: 1px solid rgba(255, 45, 120, 0.3);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: rise-in 300ms var(--ease) both;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.wa-card.is-leaving { opacity: 0; transform: scale(0.97); }
.wa-card__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  background: rgba(255, 45, 120, 0.16);
}
.wa-card__body { flex: 1; min-width: 0; }
.wa-card__title { font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.wa-card__text { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.wa-card__allow { margin-top: 12px; }
.wa-card__close {
  position: absolute; top: 6px; right: 6px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.wa-card__close .icon { width: 18px; height: 18px; }
.wa-card__close:active { background: var(--card-3); color: var(--text); }
@media (hover: hover) { .wa-card__close:hover { color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .wa-card { animation: none; } }