/* Wstawka w8, rozmowa 2: przyciski okna uczestników i dymek reakcji poza przyciskiem emotki (chat-style.css ma ponad 1000 linii). */

.chat-member-info {
  flex-wrap: wrap;
  min-width: 0;
}

.chat-member-name {
  overflow-wrap: anywhere;
}

.chat-member-akcja,
.chat-member-tak,
.chat-member-anuluj {
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
}

.chat-member-akcja {
  background: #ffffff;
  color: #c0392b;
  border: 1px solid #e0b4ae;
  margin-left: 8px;
}

.chat-member-akcja:hover:not(:disabled) {
  background: #fdecea;
}

.chat-member-wyjdz {
  color: #1a2a1e;
  border-color: #c5ccd3;
}

.chat-member-wyjdz:hover:not(:disabled) {
  background: #eef1f4;
}

.chat-member-pytanie {
  background: #f6f7f9;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0 8px;
}

.chat-member-pytanie-tresc {
  color: #1a2a1e;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.chat-member-pytanie-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-member-tak {
  background: #c0392b;
  color: #ffffff;
  border: none;
}

.chat-member-tak:hover:not(:disabled) {
  background: #a93226;
}

.chat-member-anuluj {
  background: #e0e4ea;
  color: #1a2a1e;
  border: none;
}

.chat-member-akcja:disabled,
.chat-member-tak:disabled,
.chat-member-anuluj:disabled {
  opacity: 0.6;
  cursor: default;
}

.chat-members-blad {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffebee;
  color: #c62828;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.chat-reaction-details {
  text-align: center;
}

.chat-reaction-details::after {
  left: var(--strzalka, 50%);
}

.chat-reaction-details-dol {
  bottom: auto;
  top: calc(100% + 6px);
}

.chat-reaction-details-dol::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #e0e4ea;
}

/* Wstawka w8, rozmowa 4b: rola szarym tekstem pod imieniem zamiast kolorowej plakietki obok. */
.chat-member-kolumna {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.chat-member-kolumna .chat-contact-role {
  margin-top: 1px;
}

/* Wstawka w8, rozmowa 4b: napis w malym kolku co najmniej 19 px pogrubiony, bo jasne kolory klas wymagaja duzego tekstu (chat-style.css ma ponad 1000 linii). */
.chat-avatar-sm {
  font-size: 1.2rem;
}

/* w8 R4b: na telefonie w pionie chat-style.css zmniejsza kolko listy rozmow do 1.05rem; napis zostaje duzy (jasne kolory). */
@media (max-width: 768px) and (orientation: portrait) {
  .chat-avatar {
    font-size: 1.2rem;
  }
}