/*
 * global-chat.css — Topluluk Sohbeti moderasyonu. Liste kalıbı (.usr) +
 * özet kutuları (.usr-stats) + başlık satırında oda sekmeleri. Mesaj tablosu
 * yeniden eskiye; kaldırılanlar soluk. Pencereler: sustur, susturulanlar,
 * mesajı kaldır, tümünü temizle. Döngü yok.
 * Tasarım: docs/design-system.md §7.38
 */

#view-global-chat {
  font-family: var(--wf-font-text);
  color: var(--wf-text-1);
}
.usr.gcm {
  --usr-cols: minmax(190px, 1.1fr) minmax(260px, 3fr) 72px 96px 200px;
}
#view-global-chat button:focus-visible {
  outline: 2px solid rgba(244, 236, 234, 0.6);
  outline-offset: -2px;
}

/* Araç: susturulan varsa sayı amber */
.gcm-tool-count {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wf-text-4);
}
.gcm-tool-count:empty { display: none; }
.usr-tool.has-mutes svg { color: #f0b45a; }
.usr-tool.has-mutes .gcm-tool-count { color: #f6c98a; }

/* ============================================================
   [SATIR] üye · mesaj · oda · zaman · işlemler
   ============================================================ */
.usr-row.gcm-row { cursor: default; }
.gcm-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 10px 0;
}
.gcm-text p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--wf-text-1);
}
.gcm mark,
.gcm-quote mark { padding: 0 2px; border-radius: 4px; background: rgba(240, 180, 90, 0.22); color: #f6c98a; }
.gcm-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  flex-shrink: 0;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.gcm-flag svg { width: 11px; height: 11px; }
/* Susturulan üye: avatarın köşesinde amber rozet (adı kırpmaz) */
.usr-ava i.gcm-muted-dot {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  right: -4px;
  bottom: -4px;
  background: #f0b45a;
  color: #1a1206;
  box-shadow: 0 0 0 2.5px #110d0f;
}
.gcm-muted-dot svg { width: 10px; height: 10px; stroke-width: 2.6; }
.gcm-flag.is-removed { background: rgba(251, 113, 133, 0.1); color: #fda4af; }
.gcm-row.is-deleted .gcm-text p { color: var(--wf-text-4); }
.gcm-row.is-deleted .usr-who { opacity: 0.55; }

.gcm-room {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wf-text-2);
}
.gcm .usr-btn.is-unmute svg { color: #34d399; }
.usr-icon-btn.is-danger { color: var(--wf-text-4); }
.gcm-act-pad { width: 32px; flex-shrink: 0; }

/* ============================================================
   [PENCERELER]
   ============================================================ */
/* Susturulan / kaldırılan mesaj alıntısı */
.gcm-quote {
  padding: 10px 12px;
  border-radius: 11px;
  border-left: 3px solid rgba(240, 180, 90, 0.5);
  background: rgba(255, 255, 255, 0.035);
}
.gcm-quote > span { font-size: 0.74rem; font-weight: 600; color: var(--wf-text-4); }
.dlg .gcm-quote p {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--wf-text-1);
}
.dlg .gcm-lead-quote {
  display: block;
  padding: 10px 12px;
  border-radius: 11px;
  border-left: 3px solid rgba(251, 113, 133, 0.5);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: var(--wf-text-1);
}
.gcm-optional { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--wf-text-4); }

/* Susturulanlar */
.gcm-mutes { display: flex; flex-direction: column; gap: 8px; }
.gcm-mute {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.gcm-mute-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.gcm-mute-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 700; color: var(--wf-text-1); }
.gcm-mute-text b em { font-style: normal; font-weight: 500; color: var(--wf-text-4); }
.gcm-mute-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--wf-text-3); }
.gcm-mute-left { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.25; }
.gcm-mute-left b { font-family: var(--wf-font-display); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #f6c98a; }
.gcm-mute-left span { font-size: 0.72rem; color: var(--wf-text-4); }
.usr-empty.gcm-mutes-empty { min-height: 220px; }
.gcm-mutes-empty > svg { width: 28px; height: 28px; margin-bottom: 4px; color: var(--wf-text-4); }
.gcm-mutes-empty span b { font-family: inherit; font-size: inherit; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .usr-icon-btn.is-danger:hover { background: rgba(251, 113, 133, 0.1); color: #fda4af; }
  .gcm-row:hover { background: rgba(255, 255, 255, 0.02); }
}

/* ============================================================
   [DUYARLI]
   ============================================================ */
@media (max-width: 1360px) {
  .usr.gcm { --usr-cols: minmax(180px, 1fr) minmax(240px, 3fr) 68px 92px 84px; }
  .gcm .usr-btn span { display: none; }
  .gcm .usr-btn { width: 32px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .gcm .usr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px 12px 12px 14px;
  }
  .gcm .usr-who { flex: 1 1 calc(100% - 90px); padding: 0; }
  .gcm .usr-actions { flex: 0 0 auto; order: 1; }
  .gcm .gcm-text { flex: 1 1 100%; order: 2; padding: 2px 0 0; }
  .gcm .gcm-room-cell,
  .gcm .usr-seen { order: 3; font-size: 0.78rem; color: var(--wf-text-3); }
  .gcm-mute { flex-wrap: wrap; }
  .gcm-mute .dlg-btn { flex: 1 1 100%; }
}