/* ==========================================================================
   DorukCRM — 13-mobile-screens.css
   Telefonda ekran geçişleri ve dokunma cevabı. 12-mobile.css'in devamı.

   AYRI DOSYA OLMASININ SEBEBİ ÖLÇÜ: 12-mobile.css bu bölümle birlikte 16299
   bayta çıkıyordu, yani barındırmanın FTP yazmasının kestiği 16384 sınırının
   99 bayt altına. O sınıra bu kadar yaklaşan bir dosya, eklenecek ilk
   kuralda sessizce kesilir ve kesik CSS hata vermez — yalnızca kuralların bir
   kısmı yok olur. Bölüm ayrıca kendi başına bir konu: 12 BİÇİMİ anlatıyor,
   bu dosya DAVRANIŞI.

   SIRA ÖNEMLİ; 12'den sonra yükleniyor (pages/_partials/styles.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   EKRAN GEÇİŞLERİ — 720px ve altı

   Ayrı bir blokta, çünkü yukarıdaki blok biçimi, bu blok DAVRANIŞI anlatıyor.

   Bir web sayfasında bağlantıya tıklanır ve yeni içerik anında oradadır.
   Uygulamada ekran KAYARAK gelir ve o kayma bir şey söyler: geldiğin yer
   arkanda duruyor, geri dönebilirsin. Konuşmayı açtığında hiçbir hareket
   olmaması, ekranın "değiştiğini" değil "yenilendiğini" düşündürüyordu —
   yani tam olarak bir web sayfası hissi.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* Gönder düğmesi yalnızca simge. Yazı belgede kalıyor (bkz. inbox/view.php):
     ekran okuyucu düğmenin adını okumaya devam ediyor. */
  /* GİZLE, KALDIRMA. `display:none` adı erişilebilirlik ağacından da
     silerdi ve düğmenin içindeki tek diğer içerik `aria-hidden` bir SVG;
     geriye ad taşıyan hiçbir şey kalmazdı. Bkz. .sr-only (01-base.css). */
  #composer-send .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Konuşma sağdan geliyor; künye de öyle. İkisi de kapanırken animasyon
     YOK ve bu bilinçli: kapatma geri tuşuyla oluyor, geri tuşunun beklenen
     hızı "hemen"dir ve çıkış animasyonu onu geciktirilmiş gibi gösteriyor. */
  .inbox--thread-open .chat,
  .inbox--info-open .chat-info { animation: screen-in .2s ease-out; }

  @keyframes screen-in {
    from { transform: translateX(16%); opacity: .4; }
    to   { transform: none; opacity: 1; }
  }

  /* Dokunulan satır ANINDA cevap veriyor. Bir uygulamada dokunuşun geri
     bildirimi, isteğin sonucundan önce gelir; burada sunucudan mesajlar
     dönene kadar hiçbir şey olmuyordu ve kullanıcı satıra ikinci kez
     dokunuyordu. */
  .tabbar__item:active,
  .thread:active { transition: none; }

  /* Kaydırma ivmesi: iOS'ta parmağı çekip bırakınca listenin savrulması.
     Modern Safari'de varsayılan, ama WKWebView'ın eski sürümlerinde ve bazı
     Android tarayıcılarında listenin parmağa yapışıp kalmasının sebebi tam
     olarak bunun eksikliği. */
  .chat__messages,
  .thread-list__items,
  .chat-info__body,
  .content { -webkit-overflow-scrolling: touch; }
}

/* Hareketi azaltılmış cihazda ekran kaymıyor. Geçişin işi yön anlatmaktı ve
   yönü sınıfın kendisi zaten anlatıyor; hareket olmadan da ekran doğru
   yerde. */
@media (prefers-reduced-motion: reduce) {
  .inbox--thread-open .chat,
  .inbox--info-open .chat-info { animation: none; }
}

/* --------------------------------------------------------------------------
   KONUŞMA EKRANI — 720px ve altı

   Telefonda konuşma TAM EKRANDIR. Ölçüldüğünde iki başlık üst üste
   duruyordu: uygulamanın kendi şeridi ("Gelen Kutusu · Canlı · hesap") ve
   onun altında konuşmanın başlığı. Üstteki, konuşma açıkken hiçbir şey
   söylemiyor — hangi konuşmada olunduğunu alttaki yazıyor — ama ekranın
   dikey alanından 54 piksel yiyor ve daha kötüsü, uygulamanın "bir web
   sayfasının içindeki panel" gibi görünmesinin sebebi tam olarak o.

   Hesap menüsü de gidiyor: şeritten bağımsız, .main'e mutlak konumlu duruyor
   ve yalnızca .topbar gizlenseydi avatar, konuşma başlığının üzerinde
   asılı kalırdı.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .main:has(.inbox--thread-open) .topbar,
  .main:has(.inbox--thread-open) .account { display: none; }

  /* Başlık, İÇERİĞİ KADAR yüksek. Sabit 54 piksele kilitliyken taşan içerik
     kırpılmıyor, dışarı taşıyordu: kişinin adı üstten kesiliyor ve altındaki
     hat satırı mesaj akışının üzerine biniyordu. */
  .chat__head {
    height: auto;
    min-height: var(--header-h);
    padding: .5rem .5rem .5rem .25rem;
  }

  /* İki satırın ikisi de TEK SATIR ve sığmayan yerde üç noktayla bitiyor.
     Sarmalarına izin vermek başlığı iki kat uzatıyor ve o uzunluk,
     mesajların yerinden geliyor. Tamamı künyede yazılı. */
  .chat__title,
  .chat__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "Pencere kapalı" rozeti başlıktan kalkıyor: aynı bilgi yazma alanının
     yerinde tam cümleyle ve ne yapılacağını söyleyen düğmesiyle duruyor
     (#composer-locked). Dar başlıkta rozet, adın yerini alıyordu. */
  #chat-window-badge { display: none; }

  /* Kapatma düğmesi başlıkta kalıyor ama yazısı olmadan: dar başlıkta
     "Lead'i yeniden aç" tek başına adın yerini alıyordu. Kapanış rozeti de
     kalkıyor — aynı bilgi, akışın hemen üstündeki kapanış özetinde tam
     hâliyle duruyor (#lead-summary). */
  #chat-toggle-label { display: none; }
  #chat-lead-outcome { display: none; }

  /* Geri düğmesi ve künye düğmesi parmak hedefi büyüklüğünde ve
     ÇERÇEVESİZ: kutulu iki düğme başlığı bir araç çubuğuna benzetiyordu.
     Uygulamada başlıktaki simgeler çıplak durur; dokunma hedefi görünmez
     bir alan, çizili bir kutu değil. */
  #chat-back,
  #chat-toggle-status,
  #chat-info-toggle {
    min-width: 40px;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
  }
}

/* İkinci bağlantı göstergesi yalnızca TELEFONDA görünür.
 *
 * Şeritteki gösterge telefonda konuşma açıkken gizleniyor (.topbar kalkıyor),
 * bu yüzden sohbet başlığına bir ikizi kondu. Geniş ekranda ikisi de görünür
 * olsaydı aynı durumu iki yerde yanıp söndürürdü. Bkz. UI-506. */
.chat__conn { display: none; }

@media (max-width: 720px) {
  .chat__conn { display: inline-block; }
}