/* ============================================
   PIXEL PRODUCTION — Mesajlaşma Modülü (chat.css)
   Yalnızca .pchat* ve #pchat* seçicileri — mevcut CSS'e dokunmaz.
   ============================================ */

/* ─── 3 panel yerleşim ─── */
.pchat-wrap { display: flex; height: calc(100vh - 140px); min-height: 420px; gap: 0;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

/* Sol: sohbet listesi */
.pchat-side { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.pchat-side-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--border-subtle); }
.pchat-side-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pchat-side-title { font-weight: 700; font-size: var(--text-base); color: var(--text-primary); }
.pchat-search { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--text-sm); padding: 8px 12px; outline: none; }
.pchat-search:focus { border-color: var(--primary-border); }
.pchat-tabs { display: flex; gap: 4px; margin-top: 10px; }
.pchat-tab { flex: 1; text-align: center; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
  padding: 6px 4px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.pchat-tab.active { color: var(--text-accent); background: var(--primary-subtle); border-color: var(--primary-border); }
.pchat-list { flex: 1; overflow-y: auto; padding: 6px; }
.pchat-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--radius-md); cursor: pointer; position: relative; }
.pchat-item:hover { background: var(--bg-card-hover); }
.pchat-item.active { background: var(--primary-subtle); }
.pchat-item-main { flex: 1; min-width: 0; }
.pchat-item-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pchat-item-name { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-item-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.pchat-item-last { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pchat-unread { background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.pchat-pin-ic { color: var(--text-muted); width: 12px; height: 12px; }

/* Avatarlar + durum noktası */
.pchat-ava { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.pchat-ava-in { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; background: var(--primary-gradient); overflow: hidden; border: 1px solid var(--border); }
.pchat-ava-in img { width: 100%; height: 100%; object-fit: cover; }
.pchat-ava.grp .pchat-ava-in { border-radius: var(--radius-md); }
.pchat-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg-surface); background: var(--text-muted); }
.pchat-dot.on { background: #22C55E; }
.pchat-dot.idle { background: #FBBF24; }

/* Firma rozeti */
.pchat-co { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; text-transform: uppercase; }
.pchat-co.p1 { color: #A5B4FC; background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.3); }
.pchat-co.p2 { color: #FCD34D; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); }

/* ─── Orta: mesajlar ─── */
.pchat-mid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pchat-mid-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.pchat-mid-head-info { flex: 1; min-width: 0; }
.pchat-mid-name { font-weight: 700; font-size: var(--text-base); color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.pchat-mid-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.pchat-mid-sub .typing { color: var(--text-accent); font-style: italic; }
.pchat-iconbtn { background: none; border: none; color: var(--text-muted); cursor: pointer; width: 32px; height: 32px;
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.pchat-iconbtn:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.pchat-iconbtn svg { width: 17px; height: 17px; }

.pchat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.pchat-day { align-self: center; font-size: 10px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-elevated); border-radius: 999px; padding: 3px 12px; margin: 12px 0 8px; }
.pchat-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; max-width: 78%; }
.pchat-row.me { align-self: flex-end; flex-direction: row-reverse; }
.pchat-row .pchat-ava { width: 28px; height: 28px; }
.pchat-bub { position: relative; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 14px 14px 14px 4px; padding: 8px 12px; min-width: 60px; }
.pchat-row.me .pchat-bub { background: var(--primary-dark); border-color: var(--primary-border); border-radius: 14px 14px 4px 14px; }
.pchat-row.me .pchat-bub, .pchat-row.me .pchat-bub .pchat-body { color: #EEF0FF; }
.pchat-sender { font-size: 11px; font-weight: 700; color: var(--text-accent); margin-bottom: 2px; display: flex; gap: 6px; align-items: center; }
.pchat-body { font-size: var(--text-sm); color: var(--text-primary); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.pchat-body a { color: var(--text-accent); text-decoration: underline; }
.pchat-body .mention { color: var(--text-accent); font-weight: 700; background: var(--primary-subtle); border-radius: 4px; padding: 0 3px; }
.pchat-meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 3px;
  font-size: 10px; color: var(--text-muted); }
.pchat-row.me .pchat-meta { color: rgba(238,240,255,.65); }
.pchat-ticks { letter-spacing: -2px; font-weight: 700; }
.pchat-ticks.read { color: #7DD3FC; }
.pchat-edited { font-style: italic; }
.pchat-del { font-style: italic; color: var(--text-muted); font-size: var(--text-xs); }
.pchat-reply-box { border-left: 3px solid var(--primary); background: rgba(99,102,241,.10);
  border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.pchat-fwd { font-size: 10px; color: var(--text-muted); font-style: italic; margin-bottom: 3px; }
.pchat-img { max-width: 320px; max-height: 300px; border-radius: 10px; display: block; cursor: pointer; }
.pchat-video { max-width: 340px; max-height: 300px; border-radius: 10px; display: block; }
.pchat-audio { max-width: 280px; display: block; }
.pchat-filecard { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.18); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 8px 12px; text-decoration: none; color: var(--text-primary); max-width: 320px; }
.pchat-filecard:hover { border-color: var(--primary-border); }
.pchat-filecard .fi { width: 34px; height: 34px; border-radius: 8px; background: var(--primary-subtle); color: var(--text-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pchat-filecard .fn { font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-filecard .fs { font-size: 10px; color: var(--text-muted); }
.pchat-linkprev { display: flex; gap: 8px; align-items: center; margin-top: 6px; background: rgba(0,0,0,.15);
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 10px; font-size: var(--text-xs); color: var(--text-secondary); }
.pchat-linkprev img { width: 16px; height: 16px; border-radius: 3px; }

/* Mesaj aksiyon menüsü */
.pchat-msgmenu { position: fixed; z-index: 4000; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px; min-width: 180px; }
.pchat-msgmenu button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none;
  color: var(--text-primary); font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.pchat-msgmenu button:hover { background: var(--bg-card-hover); }
.pchat-msgmenu button.danger { color: var(--error); }
.pchat-msgmenu svg { width: 15px; height: 15px; }

/* Sabit mesaj şeridi */
.pchat-pinbar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: var(--text-xs);
  color: var(--text-secondary); background: var(--primary-subtle); border-bottom: 1px solid var(--border-subtle); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kompozer */
.pchat-compose { border-top: 1px solid var(--border-subtle); padding: 10px 12px; }
.pchat-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-xs);
  color: var(--text-secondary); background: var(--primary-subtle); border-left: 3px solid var(--primary);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
.pchat-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.pchat-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 18px;
  color: var(--text-primary); font-size: var(--text-sm); padding: 10px 14px; outline: none; resize: none;
  max-height: 120px; min-height: 40px; line-height: 1.4; font-family: inherit; }
.pchat-input:focus { border-color: var(--primary-border); }
.pchat-send { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary-gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pchat-send:hover { filter: brightness(1.1); }
.pchat-send svg { width: 18px; height: 18px; }
.pchat-send.rec { background: linear-gradient(135deg,#EF4444,#DC2626); animation: pchatPulse 1.2s infinite; }
@keyframes pchatPulse { 50% { transform: scale(1.08); } }

/* Emoji seçici */
.pchat-emoji-pop { position: absolute; bottom: 64px; left: 10px; z-index: 3500; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  width: 300px; max-height: 260px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.pchat-emoji-pop span { font-size: 20px; text-align: center; cursor: pointer; border-radius: 6px; padding: 3px 0; }
.pchat-emoji-pop span:hover { background: var(--bg-card-hover); }

/* Sürükle-bırak katmanı */
.pchat-drop { position: absolute; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(99,102,241,.15); border: 2px dashed var(--primary); border-radius: var(--radius-lg);
  color: var(--text-accent); font-weight: 700; font-size: var(--text-lg); backdrop-filter: blur(4px); }

/* ─── Sağ panel ─── */
.pchat-right { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.pchat-right-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); }
.pchat-right-tab { flex: 1; text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); padding: 10px 2px; cursor: pointer; border-bottom: 2px solid transparent; }
.pchat-right-tab.active { color: var(--text-accent); border-bottom-color: var(--primary); }
.pchat-right-body { flex: 1; overflow-y: auto; padding: 12px; }
.pchat-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pchat-media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }
.pchat-member-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); cursor: pointer; }
.pchat-member-row:hover { background: var(--bg-card-hover); }
.pchat-member-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.pchat-member-sub { font-size: var(--text-xs); color: var(--text-muted); }
.pchat-filter-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.pchat-chip { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-subtle); }
.pchat-chip.active { color: var(--text-accent); background: var(--primary-subtle); border-color: var(--primary-border); }

/* Profil kartı popup */
.pchat-profile { position: fixed; z-index: 4200; width: 280px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,.55); padding: 18px; }
.pchat-profile .row { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-secondary); margin-top: 8px; }
.pchat-profile .row svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

/* Topbar mesaj merkezi açılır kutusu */
.pchat-center { position: fixed; z-index: 4100; width: 340px; max-height: 460px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.pchat-center-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--border-subtle); }
.pchat-center-list { flex: 1; overflow-y: auto; padding: 6px; }

/* Yeni mesaj toast'ı */
.pchat-toast { position: fixed; right: 20px; bottom: 20px; z-index: 5000; display: flex; gap: 10px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--primary-border); border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 12px 16px; max-width: 320px; cursor: pointer; animation: pchatIn .25s ease; }
@keyframes pchatIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Boş durum */
.pchat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
.pchat-empty svg { width: 46px; height: 46px; opacity: .5; }

/* Proje sohbet kartı (proje detayına eklenir) */
.pchat-proj-cta { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--primary-border); border-radius: var(--radius-lg); padding: 16px 20px; }

/* ─── Responsive: tablet + mobil (WhatsApp benzeri) ─── */
@media (max-width: 1100px) { .pchat-right { display: none; } }
@media (max-width: 768px) {
  .pchat-wrap { height: calc(100dvh - 130px); border-radius: var(--radius-md); }
  .pchat-side { width: 100%; border-right: none; }
  .pchat-mid { display: none; }
  .pchat-wrap.inchat .pchat-side { display: none; }
  .pchat-wrap.inchat .pchat-mid { display: flex; }
  .pchat-back { display: inline-flex !important; }
  .pchat-row { max-width: 90%; }
  .pchat-img, .pchat-video { max-width: 230px; }
  .pchat-center { width: calc(100vw - 24px); right: 12px !important; left: 12px !important; }
}
.pchat-back { display: none; }