/* ============================================================
   Sabitlenmiş Mesajlar Paneli (popover) + Sabitleme Bildirimi
   Discord stili. Koyu tema varsayılan, aydınlık tema uyumlu.
   Eşlik eden modül: js/chat/pins.js
   ============================================================ */

/* ---------- Popover sarmalayıcı (pinBtn'in altında konumlanır) ---------- */
/* pinBtn'in bulunduğu .rh-actions/.rh-act'a göre konumlanabilmesi için
   pinBtn'e position relative veriyoruz (pins.js çalışma anında ekler). */
.pins-pop{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:420px;
  max-width:calc(100vw - 24px);
  background:var(--popout-bg);                 /* gövde */
  border:1px solid var(--border);
  border-radius:var(--radius-sm,8px);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  z-index:1000;
  overflow:hidden;
  transform-origin:top right;
  /* açılış animasyonu: scale + fade */
  animation:pins-pop-in .14s cubic-bezier(.2,.8,.3,1);
}
@keyframes pins-pop-in{
  from{ opacity:0; transform:scale(.94) translateY(-6px); }
  to  { opacity:1; transform:scale(1)   translateY(0);   }
}
/* kapanış (pins.js .closing ekleyip animation sonrası kaldırır) */
.pins-pop.closing{
  animation:pins-pop-out .12s ease forwards;
  pointer-events:none;
}
@keyframes pins-pop-out{
  from{ opacity:1; transform:scale(1); }
  to  { opacity:0; transform:scale(.96) translateY(-4px); }
}

/* küçük ok / üçgen ipucu (başlığın üstünde, pinBtn'e bakar) */
.pins-pop::before{
  content:"";
  position:absolute;
  top:-6px;
  right:14px;
  width:12px;height:12px;
  background:var(--popout-inner);                 /* başlık rengiyle aynı */
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:rotate(45deg);
}

/* ---------- Başlık ---------- */
.pins-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px;
  background:var(--popout-inner);                 /* koyu başlık */
  color:var(--head);
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid var(--border);
}
.pins-head svg{ display:block; opacity:.85; }
.pins-head .pins-title{ flex:1; }

/* ---------- Gövde (scroll alanı) ---------- */
.pins-body{
  max-height:60vh;
  overflow-y:auto;
  padding:6px;
  background:var(--popout-bg);
}
.pins-body::-webkit-scrollbar{ width:8px; }
.pins-body::-webkit-scrollbar-thumb{
  background:var(--scrollbar); border-radius:4px;
}
.pins-body::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Boş durum ---------- */
.pins-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:34px 18px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.pins-empty svg{ opacity:.4; }

/* yükleniyor durumu */
.pins-loading{
  padding:28px 18px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

/* ---------- Pin kartı ---------- */
.pin-card{
  position:relative;
  display:flex;
  gap:12px;
  padding:10px 12px;
  border-radius:6px;
  transition:background .1s ease;
}
.pin-card + .pin-card{
  border-top:1px solid var(--border);
}
.pin-card:hover{
  background:var(--hover);
}

/* avatar 32px */
.pin-card .pin-av{
  width:32px;height:32px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:var(--text-on-accent,#fff);   /* avatar baş harfi */
  position:relative;
}
.pin-card .pin-av img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
}
/* userlist.js makeUserAvatar online noktasını gizle (panelde gereksiz) */
.pin-card .pin-av .u-av-dot{ display:none; }

.pin-card .pin-main{
  flex:1;
  min-width:0;            /* uzun metnin taşmasını engeller */
}

.pin-card .pin-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:2px;
}
.pin-card .pin-nick{
  font-size:14px;
  font-weight:600;
  color:var(--head);          /* renk pins.js'te override edilir */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pin-card .pin-time{
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}
.pin-card .pin-text{
  font-size:14px;
  line-height:1.4;
  color:var(--text);
  word-break:break-word;
  white-space:pre-wrap;
}
.pin-card .pin-text img.pin-img{
  max-width:100%;
  max-height:160px;
  border-radius:6px;
  margin-top:2px;
  display:block;
}

/* alt aksiyon satırı */
.pin-card .pin-actions{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.pin-card .pin-go{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  background:transparent;
  border:none;
  padding:3px 6px;
  border-radius:var(--radius-xs,4px);
  cursor:pointer;
  transition:background .1s ease, color .1s ease;
}
.pin-card .pin-go:hover{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration:underline;
}
.pin-card .pin-go svg{ display:block; }

/* sağ üstte sabitlemeyi kaldır (X) */
.pin-card .pin-remove{
  position:absolute;
  top:8px;right:8px;
  width:24px;height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:var(--popout-inner);
  color:var(--text);
  border-radius:var(--radius-xs,4px);
  cursor:pointer;
  opacity:0;
  transition:opacity .1s ease, background .1s ease, color .1s ease;
}
.pin-card:hover .pin-remove{ opacity:1; }
.pin-card .pin-remove:hover{
  background:var(--danger);
  color:var(--text-on-accent,#fff);
}
.pin-card .pin-remove svg{ display:block; }

/* ============================================================
   Chat içi sabitleme bildirimi (.pin-notice)
   Normal mesajdan ince/soluk, ikonlu, sola dayalı.
   ============================================================ */
.pin-notice{
  display:flex;
  align-items:center;
  gap:8px;
  padding:2px 18px 2px 20px;
  margin:4px 0;
  font-size:13px;
  color:var(--muted);            /* soluk gri */
  line-height:1.4;
}
.pin-notice .pin-notice-ico{
  flex-shrink:0;
  font-size:14px;
  opacity:.8;
  line-height:1;
}
.pin-notice .pin-notice-nick{
  font-weight:600;
  color:var(--text);
}
.pin-notice .pin-notice-time{
  font-size:11px;
  color:var(--muted);
  margin-left:4px;
}
/* hafif giriş animasyonu */
.pin-notice.pin-notice-in{
  animation:pin-notice-in .18s ease;
}
@keyframes pin-notice-in{
  from{ opacity:0; transform:translateY(3px); }
  to  { opacity:1; transform:translateY(0); }
}

/* "Git" ile vurgulanan mesaj (messages.js msg-flash) */
.msg.msg-flash{
  animation:msg-flash-anim 1.6s ease;
}
@keyframes msg-flash-anim{
  0%   { background:color-mix(in srgb, var(--accent) 18%, transparent); }
  70%  { background:color-mix(in srgb, var(--accent) 10%, transparent); }
  100% { background:transparent; }
}

/* Dokunmatikte hover yok → sabitlemeyi kaldır (X) butonu hep görünsün (#29) */
@media (hover: none), (pointer: coarse){
  .pin-card .pin-remove{ opacity:1; }
}