/* ============================================================
   Muhabbetci — Ekran Uyum Katmanı (uyum.css)
   Bu dosya EN SON yüklenir; hem masaüstü hem mobil için
   panel açma/kapama, katlanır bölümler ve düzen kurallarını
   tek yerde toplar. Tüm medya sorgularını tamamlar.
   ============================================================ */

/* ============================================================
   0) TEMEL — her iki dünyada geçerli
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

/* uzun kelimeler kutuları taşırmasın */
.layer-name, .layer-sub, .user-name, .user-sub,
.speaker-name, .room-name, .rank-name, .rank-title,
.admin-profile-name, .admin-profile-rank, .msg-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* katmanlı panel listeleri her ekranda kaydırılabilir */
.layer-list {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.layer-list::-webkit-scrollbar { width: 6px; }
.layer-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 3px;
}

/* ============================================================
   1) MASAÜSTÜ — 1200px ve üzeri geniş ekran
   ============================================================ */
@media (min-width: 1201px) {
  .layout {
    grid-template-columns: 224px minmax(0, 1fr) 262px;
    gap: 14px;
  }
  .layer-list { max-height: 260px; }
  .admin-profile { padding: 11px 13px; }
}

/* çok geniş ekran — sütunlar daha da açılsın */
@media (min-width: 1600px) {
  .layout {
    grid-template-columns: 250px minmax(0, 1fr) 300px;
    max-width: 1680px;
    margin: 0 auto;
  }
  .layer-list { max-height: 300px; }
}

/* ============================================================
   2) ORTA MASAÜSTÜ / KÜÇÜK DİZÜSTÜ — 981–1200px
   ============================================================ */
@media (min-width: 981px) and (max-width: 1200px) {
  .layout { grid-template-columns: 206px minmax(0, 1fr) 238px; gap: 11px; }
  .layer-list { max-height: 220px; }
  .layer-bar { margin: 6px 9px 0; font-size: 12px; }
}

/* ============================================================
   3) TABLET — 761–980px
   ============================================================ */
@media (min-width: 761px) and (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr) 232px; gap: 11px; }
  .layer-bar { font-size: 12px; }
  .layer-list { max-height: 200px; }
  .admin-panel { width: min(360px, 80vw); }
}

/* ============================================================
   4) MOBİL — 760px ve altı: katmanlar tam genişlik
   ============================================================ */
@media (max-width: 760px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }

  /* kullanıcı paneli tam genişlik çekmece */
  .users-panel {
    width: min(320px, 92vw) !important;
  }

  /* başlık düğmeleri parmakla rahat basılır */
  .layer-bar {
    margin: 7px 10px 0;
    padding: 11px 12px;
    min-height: 44px;
    font-size: 13px;
  }
  .layer-body { margin: 5px 10px 0; }
  .layer-list { max-height: 42vh; }
  .layer-item { padding: 9px 8px; min-height: 46px; }
  .layer-av { width: 30px; height: 30px; font-size: 11.5px; }
  .layer-name { font-size: 13px; }
  .layer-sub { font-size: 10.5px; }

  /* yönetici profili mobilde tam satır */
  .admin-profile {
    margin: 8px 10px 2px;
    padding: 11px 12px;
    gap: 10px;
  }
  .admin-profile-av { width: 40px; height: 40px; font-size: 14px; }

  /* yetki ver/çıkar kutuları alt alta */
  .grant-row {
    flex-direction: column;
    gap: 8px;
  }
  .grant-row input,
  .grant-row select,
  .grant-btn {
    width: 100%;
    max-width: 100%;
  }
  .grant-btn { min-height: 44px; }

  .grant-item { min-height: 48px; padding: 9px 10px; }

  /* hızlı kamera penceresi alt tabakaya oturur */
  .cam-quick {
    right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 62vh;
  }
}

/* ============================================================
   5) TELEFON — 560px ve altı
   ============================================================ */
@media (max-width: 560px) {
  .layer-bar { margin: 6px 8px 0; padding: 10px 11px; font-size: 12.5px; }
  .layer-body { margin: 5px 8px 0; }
  .layer-list { max-height: 38vh; }
  .layer-count { min-width: 22px; font-size: 10px; }

  .admin-profile { margin: 7px 8px 2px; padding: 10px 11px; }
  .admin-profile-tag { font-size: 8.5px; }

  .cam-quick-body { aspect-ratio: 3 / 4; }
  .cam-quick-ph { font-size: 28px; }
}

/* ============================================================
   6) KÜÇÜK TELEFON — 400px ve altı
   ============================================================ */
@media (max-width: 400px) {
  .layer-bar { padding: 10px; gap: 7px; font-size: 12px; }
  .layer-ico { font-size: 13px; }
  .layer-item { padding: 8px 7px; gap: 8px; }
  .layer-av { width: 27px; height: 27px; font-size: 10.5px; }
  .layer-list { max-height: 34vh; }
  .admin-profile-name { font-size: 13px; }
}

/* ============================================================
   7) DOKUNMATİK CİHAZ İNCELİKLERİ
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* dokunmatikte tüm tıklanabilir katmanlar min 44px */
  .layer-bar, .layer-item, .grant-btn,
  .admin-profile, .icon-btn, .chip {
    min-height: 44px;
  }
  /* hover efektleri dokunmatikte takılı kalmasın */
  .layer-item:hover { background: transparent; border-color: transparent; }
  .layer-item:active {
    background: rgba(79,140,255,.2);
    border-color: rgba(79,140,255,.5);
  }
  /* dokunmatikte kaydırma ipuçları */
  .layer-list { overscroll-behavior: contain; }
}

/* ============================================================
   8) YATAY TELEFON / KISA EKRAN
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .layer-list { max-height: 30vh; }
  .layer-bar { min-height: 38px; padding: 8px 10px; }
  .admin-profile { padding: 8px 10px; }
  .cam-quick { max-height: 70vh; }
  .cam-quick-body { aspect-ratio: 16 / 9; }
}

/* ============================================================
   9) YAZDIRMA
   ============================================================ */
@media print {
  .topbar, .controls, .rooms-panel, .users-panel,
  .admin-panel, .fab, .cam-quick, .toast-wrap { display: none !important; }
  .layout { display: block; }
}