/* a5-share-notif — bu dosya tek bir ajana ait. polish.css'e dokunulmuyor.
   Sıra: polish.css'ten SONRA yükleniyor, bu yüzden aynı özgüllükte yazılan
   kurallar polish'i geçersiz kılar; !important gerekmiyor.

   İçerik
   1) PAYLAŞ KUTUSU — düzen çökmesi, seçim geri bildirimi, kopyalama şeridi
   2) BİLDİRİM SATIRI — tıklanabilirlik, odak, okunmadı işareti
   ============================================================ */

/* Tema jetonlarında olmayan iki renk burada tanımlanıyor; kurallar yalnızca
   var(--mg-*) üzerinden yazılıyor, gövdede sabit hex yok.
   --mg-on-accent : marka kırmızısının ÜSTÜNDEKİ işaret/metin. Her iki temada
                    da beyaz kalmalı, yoksa kırmızı dolgudaki tik kayboluyor.
   --mg-ok        : "gönderildi" onayı. polish.css bunu iki ayrı sabit yeşille
                    yazıyordu; burada tek jetona bağlandı. */
:root {
  --mg-on-accent: #ffffff;
  --mg-ok: #4ade80;          /* koyu tema: zemin koyu, açık yeşil okunur */
}
html[data-theme="light"] {
  /* Ölçülerek seçildi: kendi %12–%14 tonunun üstünde 4,86:1 ve 5,47:1 kontrast
     veriyor. Bir tık daha açık yeşil (#12764a) 4,23:1'de kalıp AA'yı geçmiyordu. */
  --mg-ok: #0f6b42;
}

/* ============================================================
   1) PAYLAŞ KUTUSU
   ============================================================ */

/* Kök sorun: polish.css kutuya SABİT yedi satırlık bir grid veriyordu
   (`grid-template-rows: auto auto auto minmax(0,1fr) auto auto auto`) ama
   kutunun çocuk sayısı içeriğe göre değişiyor — önizleme yoksa, misafirse,
   sonuç satırı yoksa daha az çocuk oluyor. O zaman `minmax(0,1fr)` LİSTEYE
   değil not kutusuna denk geliyordu: liste taşıyor, textarea gereksiz
   uzuyordu. Esnek kolon bunu içerikten bağımsız çözer. */
.mg-modal.share-sheet {
  display: flex; flex-direction: column;
  width: min(470px, 100%); max-height: min(700px, 90vh);
  padding: 0; overflow: hidden;
}
.share-sheet > * { flex: none; }

.share-sheet > header { padding: 15px 18px 13px; }
.share-sheet > header h3 { font-size: 16.5px; }
.share-close {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 9px; background: transparent; color: var(--mg-faint);
}
.share-close:hover { background: var(--mg-surface-2); color: var(--mg-text); }

/* Önizleme: gönderi kimliği belirsizken "neyi paylaşıyorum" sorusu kalıyordu. */
.share-preview { margin: 13px 18px 2px; }

/* ---------- Arama ---------- */
.share-search { margin: 12px 18px 0; }
.share-search:focus-within {
  border-color: var(--mg-accent);
  box-shadow: 0 0 0 3px var(--mg-accent-soft);
}
.share-search input::placeholder { color: var(--mg-muted); }
.share-search-clear {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--mg-surface-2); color: var(--mg-muted);
}
.share-search-clear:hover { background: var(--mg-line-strong); color: var(--mg-text); }

/* ---------- Seçilenler şeridi ----------
   Liste kaydırıldığında seçimler gözden kayboluyordu; kim seçili olduğu
   artık listeden bağımsız duruyor ve tek tıkla geri alınıyor. */
.share-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 18px 0; max-height: 74px; overflow-y: auto;
}
.share-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  max-width: 190px; padding: 5px 8px 5px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mg-accent) 40%, var(--mg-line));
  background: var(--mg-accent-soft); color: var(--mg-text);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.share-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-chip > .mg-icon { flex: none; color: var(--mg-accent-ink); }
.share-chip:hover { border-color: var(--mg-accent); }
.share-chip.is-clear {
  padding: 5px 11px; border-style: dashed;
  border-color: var(--mg-line-strong); background: transparent; color: var(--mg-muted);
}
.share-chip.is-clear:hover { color: var(--mg-text); border-color: var(--mg-text); }

/* ---------- Alıcı listesi ---------- */
.share-list {
  flex: 1 1 auto; min-height: 120px;   /* min-height:0 + taban: liste hiç ezilmesin */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 10px; margin: 8px 8px 0;
}
/* polish.css bu iki metni --mg-faint ile yazıyordu; ölçüldü: aydınlık temada
   3,07:1, koyu temada 4,00:1 — ikisi de AA'nın (4,5:1) altında. --mg-muted
   ile 5,74:1 / 7,46:1'e çıkıyor. Jetonun kendisi değişmiyor, yalnızca bu
   iki kural. */
.share-group { color: var(--mg-muted); }
.share-row-name small { color: var(--mg-muted); }
.share-row { gap: 11px; padding: 8px 10px; transition: background .12s ease; }
.share-row:hover:not(:disabled) { background: var(--mg-surface-2); }
.share-row:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: -2px; }

/* Seçili satır: yalnızca soluk pembe zemin yetmiyordu — aydınlık temada
   %12 opaklık beyaz üstünde neredeyse görünmez. Zemin + çerçeve + dolu tik
   + koyulaşan ad, üç ayrı ipucu. */
.share-row.on {
  background: var(--mg-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mg-accent) 50%, transparent);
}
.share-row.on:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mg-accent) 18%, var(--mg-surface));
}
.share-row.on .share-row-name b { color: var(--mg-accent-ink); }

/* Tik SVG yerine CSS ile çiziliyor: dolu daire içindeki işaretin rengi
   temaya göre değil, zemine (kırmızı) göre seçilmeli. */
.share-tick {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--mg-line-strong);
  background: transparent; transition: background .12s ease, border-color .12s ease;
}
.share-tick::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.share-row:hover:not(:disabled) .share-tick { border-color: var(--mg-muted); }
.share-row.on .share-tick { background: var(--mg-accent); border-color: var(--mg-accent); }
.share-row.on .share-tick::after { border-color: var(--mg-on-accent); }

/* Liste içi durumlar: yükleniyor / hata / boş */
.share-state {
  display: grid; justify-items: center; gap: 6px;
  padding: 26px 18px; text-align: center;
}
.share-state b { font-size: 14.5px; font-weight: 700; color: var(--mg-text); }
.share-state small { font-size: 12.5px; line-height: 1.5; color: var(--mg-muted); max-width: 34ch; }
.share-retry {
  margin-top: 6px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--mg-line-strong); border-radius: 9px;
  background: transparent; color: var(--mg-text); font: inherit; font-size: 13px; font-weight: 700;
}
.share-retry:hover { background: var(--mg-surface-2); border-color: var(--mg-text); }

.share-note-input { margin: 10px 18px 0; }
.share-note-input:focus { box-shadow: 0 0 0 3px var(--mg-accent-soft); }
.share-note-input::placeholder { color: var(--mg-muted); }

/* ---------- Misafir kapısı ----------
   Giriş düğmesi artık altbilgide; buradaki blok yalnızca sebebi anlatıyor. */
.share-gate { padding: 26px 24px 20px; }
.share-gate > i {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--mg-surface-2); color: var(--mg-muted);
}

/* ---------- Sonuç satırı ---------- */
.share-result {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 18px 0; padding: 9px 11px; border-radius: 10px;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.share-result .mg-icon { flex: none; }
.share-result.ok {
  color: var(--mg-ok);
  background: color-mix(in srgb, var(--mg-ok) 12%, transparent);
  --mg-badge-knockout: var(--mg-surface);
}
/* polish.css bu iki kuralı sabit yeşille yazıyor; jetona çekiliyor. */
html:not([data-theme="light"]) .share-result.ok { color: var(--mg-ok); }
.share-result.err {
  color: var(--mg-accent-ink);
  background: var(--mg-accent-soft);
}

/* ---------- Bağlantı şeridi ----------
   Eskiden bağlantı yalnızca pano yazımı ÇÖKTÜĞÜNDE beliriyordu; kopyalama
   çalıştığında da çalışmadığında da kullanıcı bir şey göremiyordu. Şerit
   artık kalıcı: bağlantı gözle görülür, düğme durumunu söyler. */
.share-linkbar {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 18px 0; padding: 6px 6px 6px 12px;
  border: 1px solid var(--mg-line-strong); border-radius: 12px; background: var(--mg-bg);
}
.share-linkbar .share-link {
  flex: 1; min-width: 0; width: auto; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--mg-muted);
  font-size: 12.5px; text-overflow: ellipsis; outline: none;
}
.share-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--mg-line-strong); background: var(--mg-surface);
  color: var(--mg-text); font: inherit; font-size: 13px; font-weight: 700;
}
.share-copy:hover { background: var(--mg-surface-2); border-color: var(--mg-text); color: var(--mg-text); }
.share-copy:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
/* Kopyalandı: rengi de biçimi de değişir, yalnızca yazı değişse fark edilmiyordu. */
.share-copy.is-done {
  border-color: var(--mg-ok); color: var(--mg-ok);
  background: color-mix(in srgb, var(--mg-ok) 14%, transparent);
  --mg-badge-knockout: var(--mg-surface);
}
.share-copy.is-done:hover { border-color: var(--mg-ok); color: var(--mg-ok); }
.share-hint {
  margin: 7px 18px 0; font-size: 12px; line-height: 1.45; color: var(--mg-muted);
}

/* ---------- Altbilgi ---------- */
.share-sheet > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 13px 18px; border-top: 1px solid var(--mg-line);
  background: var(--mg-surface);
}
/* --mg-faint burada da AA'nın altında kalıyordu (bkz. .share-group notu). */
.share-foot-note { min-width: 0; font-size: 12.5px; color: var(--mg-muted); }
.share-send {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--mg-accent); color: var(--mg-on-accent);
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none;
}
.share-send:hover:not(:disabled) { background: var(--mg-accent-ink); }
.share-send:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
.share-send:disabled { opacity: .45; cursor: default; }
.share-send .loading-wheel { border-top-color: var(--mg-on-accent); }

/* Dar ekranda kutu alta yapışır: 470px kutu 360px telefonda kenarlara değiyordu. */
@media (max-width: 520px) {
  .mg-modal.share-sheet { width: 100%; max-height: 92vh; border-radius: 16px; }
  .share-sheet > header, .share-preview, .share-search, .share-chips,
  .share-note-input, .share-result, .share-linkbar, .share-hint,
  .share-sheet > footer { margin-left: 0; margin-right: 0; }
  .share-sheet > header { padding-left: 14px; padding-right: 14px; }
  .share-preview, .share-search, .share-chips, .share-note-input,
  .share-result, .share-linkbar, .share-hint { margin-left: 14px; margin-right: 14px; }
  .share-sheet > footer { padding-left: 14px; padding-right: 14px; }
  .share-linkbar .share-link { font-size: 12px; }
}

/* ============================================================
   2) BİLDİRİM SATIRI — tıklanabilirlik

   Satır <article> idi: ne tıklama olayı ne klavye erişimi vardı, ama sağda
   bir chevron duruyordu. Satır artık gerçek bir <button> (hedefi çözülemeyen
   bildirimlerde düğme değil düz kutu kalıyor).

   NOT: aydınlık tema metin kontrastı polish.css §75'te çözülmüş durumda;
   burada metin rengine dokunulmuyor, yalnızca düğme sıfırlaması, zemin,
   odak ve okunmadı işareti var.
   ============================================================ */
button.notification-item {
  width: 100%; margin: 0; font: inherit; text-align: left; cursor: pointer;
  color: inherit; -webkit-appearance: none; appearance: none;
  transition: background .12s ease, border-color .12s ease;
}
.notification-item.is-link:hover {
  background: var(--mg-surface-2);
  border-color: var(--mg-line-strong);
}
.notification-item.is-link:active { transform: translateY(1px); }
.notification-item.is-link:focus-visible {
  outline: 2px solid var(--mg-accent); outline-offset: 2px;
}
/* Ok, satırın tıklanabilir olduğunu söyleyen tek ipucu; imleç üstündeyken
   marka rengine dönüp bir adım kayıyor. */
.notification-item.is-link:hover .notification-go {
  color: var(--mg-accent-ink); transform: translateX(2px);
}
.notification-go { transition: color .12s ease, transform .12s ease; }

/* Okunmamış satır: polish yalnızca çerçeveyi renklendiriyordu, listede
   ayırt etmek zordu. Zemin çok hafif marka tonuna kayıyor + sağda nokta. */
.notification-item.unread {
  background: color-mix(in srgb, var(--mg-accent) 7%, var(--mg-surface));
}
.notification-item.unread.is-link:hover {
  background: color-mix(in srgb, var(--mg-accent) 13%, var(--mg-surface));
}
.notification-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mg-accent);
}

/* Satırlar arasında nefes payı; <article> yığını bitişikti. */
.notifications-main .notification-item + .notification-item { margin-top: 8px; }
.notifications-main .notification-tabs + .notification-item { margin-top: 10px; }

/* Avatar bloğu düğme içinde de sabit kalsın (UserAvatar Static bir div üretir). */
.notification-item .notification-avatar .user-identity { display: block; }