/* ============================================================
   YANITLAMA + İLETME stilleri — Discord birebir.
   reply.js (#replyBar, .reply-ref) ve forward.js (.fwd-*) için.
   ============================================================ */

/* ===================== YANIT ÇUBUĞU (composer üstü) ===================== */
#replyBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 14px;
  margin:0;
  background:var(--popout-bg);
  /* Üst köşeler yuvarlak — composer'a oturur gibi */
  border-radius:8px 8px 0 0;
  /* Sol renkli çizgi (Discord blurple) */
  border-left:3px solid var(--accent);
  color:var(--muted);
  font-size:13px;
  animation:replyBarUp .16s ease-out;
}
.reply-bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar-label strong{ font-weight:600; }

.reply-bar-close{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  padding:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.reply-bar-close:hover{ background:var(--hover); color:var(--text); }
.reply-bar-close svg{ display:block; }

@keyframes replyBarUp{
  0%{ transform:translateY(8px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

/* ===================== YANIT REFERANSI (mesaj üstü) =====================
   Discord .repliedMessage: font-size .875rem (14px), kucuk, mini avatar,
   kivrimli spine (2px, radius 6px). */
.reply-ref{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 4px 0;       /* Discord --reply-spacing:4px */
  padding-left:8px;       /* kıvrımlı çizgiye yer */
  font-size:14px;
  line-height:1.25;
  color:var(--text);
  cursor:pointer;
  max-width:100%;
  overflow:hidden;
  white-space:pre;
}

/* ╭ kıvrımlı çizgi: spine elemanı üzerinde border-top + border-left + radius
   Discord: --spine-width:2px, border-start-start-radius:6px */
.reply-ref-spine{
  position:absolute;
  left:-30px;             /* avatar kolonunun altına uzanır */
  bottom:-2px;
  width:34px;
  height:11px;
  border-top:2px solid var(--border);
  border-left:2px solid var(--border);
  border-top-left-radius:6px;
  pointer-events:none;
  transition:border-color 50ms;
}
.reply-ref:hover .reply-ref-spine{ border-color:var(--text); }

.reply-ref-av{
  flex-shrink:0;
  width:16px; height:16px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  line-height:1;
}
.reply-ref-av img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Discord: kullanici adi opacity .64, margin-inline-end 4px */
.reply-ref-nick{
  flex-shrink:0;
  font-weight:500;
  margin-inline-end:4px;
  opacity:.64;
}

.reply-ref-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  transition:color .12s ease,opacity .12s ease;
}
/* hover'da metin parlar (Discord: color var(--text-strong)) */
.reply-ref:hover .reply-ref-text{ color:var(--text); }
.reply-ref:hover .reply-ref-nick{ opacity:1; }

/* Yanıt referansına tıklayınca hedef mesaj kısa vurgu */
.msg-flash{
  animation:msgFlash 1.6s ease;
}
@keyframes msgFlash{
  0%{ background:var(--mention-bg); }
  100%{ background:transparent; }
}

/* ===================== İLETME MODALI ===================== */
.fwd-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .16s ease;
  /* overlay backdrop her iki temada koyu kalır */
}
.fwd-overlay.open{ opacity:1; }

.fwd-modal{
  width:460px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 80px);
  display:flex;
  flex-direction:column;
  background:var(--popout-bg);
  border-radius:var(--radius-sm,8px);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  overflow:hidden;
  transform:scale(.94);
  opacity:0;
  transition:transform .16s ease,opacity .16s ease;
}
.fwd-overlay.open .fwd-modal{ transform:scale(1); opacity:1; }

/* Mobil: modalı üste yasla + dvh — klavye açılınca alttaki Gönder butonu kapanmasın (#11) */
@media (max-width:640px){
  .fwd-overlay{ align-items:flex-start; }
  .fwd-modal{ max-height:100dvh; margin-top:8px; }
}

/* --- Başlık --- */
.fwd-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:16px 16px 8px;
}
.fwd-title{ font-size:20px; font-weight:700; color:var(--head); }
.fwd-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.fwd-close{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  padding:0;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.fwd-close:hover{ background:var(--hover); color:var(--text); }
.fwd-close svg{ display:block; }

/* --- Arama --- */
.fwd-search{
  position:relative;
  margin:4px 16px 10px;
}
.fwd-search-ic{
  position:absolute;
  left:10px; top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  display:flex;
  pointer-events:none;
}
.fwd-search-input{
  width:100%;
  background:var(--popout-inner);
  border:none;
  border-radius:4px;
  color:var(--text);
  font-size:14px;
  padding:9px 10px 9px 32px;
  outline:none;
}
.fwd-search-input::placeholder{ color:var(--muted); }

/* --- Hedef listesi --- */
.fwd-list{
  flex:1 1 auto;
  min-height:80px;
  max-height:280px;
  overflow-y:auto;
  padding:0 8px;
}
.fwd-list::-webkit-scrollbar{ width:8px; }
.fwd-list::-webkit-scrollbar-thumb{ background:var(--scrollbar); border-radius:4px; }

.fwd-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  margin:1px 0;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .1s ease,border-color .1s ease;
}
.fwd-row:hover{ background:var(--hover); }
.fwd-row.selected{ border-color:var(--accent); background:var(--mention-bg); }

.fwd-hash{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  color:var(--muted);
}
.fwd-av{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; line-height:1;
}
.fwd-av img{ width:100%; height:100%; object-fit:cover; display:block; }

.fwd-row-name{
  flex:1 1 auto;
  font-size:15px;
  font-weight:500;
  color:var(--head);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Sağda radio benzeri seçim göstergesi */
.fwd-radio{
  flex-shrink:0;
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid var(--muted);
  transition:border-color .1s ease,background .1s ease;
  position:relative;
}
.fwd-row.selected .fwd-radio{
  border-color:var(--accent);
  background:var(--accent);
}
.fwd-row.selected .fwd-radio::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--text-on-accent,var(--head));
}

.fwd-empty{
  padding:24px 8px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* --- Seçili mesaj önizlemesi --- */
.fwd-preview{
  margin:10px 16px 0;
  padding:8px 12px;
  background:var(--popout-inner);
  border-radius:6px;
  border-left:3px solid var(--border);
}
.fwd-preview-nick{ font-size:13px; font-weight:600; color:var(--head); }
.fwd-preview-text{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:60px;
  overflow:hidden;
}

/* --- Alt: not + Gönder --- */
.fwd-foot{
  display:flex;
  gap:8px;
  align-items:center;
  padding:14px 16px 16px;
}
.fwd-note{
  flex:1 1 auto;
  background:var(--popout-inner);
  border:none;
  border-radius:6px;
  color:var(--text);
  font-size:14px;
  padding:9px 11px;
  outline:none;
}
.fwd-note::placeholder{ color:var(--muted); }
.fwd-send{
  flex-shrink:0;
  background:var(--accent);
  color:var(--text-on-accent,#fff);
  border:none;
  border-radius:var(--radius-xs,4px);
  font-size:14px;
  font-weight:600;
  padding:0 18px;
  height:38px;
  cursor:pointer;
  transition:background .12s ease,opacity .12s ease;
}
.fwd-send:hover{ background:var(--accent-hover); }
.fwd-send:disabled{ opacity:.5; cursor:not-allowed; }