/* ==========================================================================
   DorukCRM — 12-mobile.css
   Telefon: Android ve iOS. EN SON yüklenir ve bilerek öyle.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php. Bu parça sonuncu olduğu için önceki
   dosyalardaki masaüstü kurallarını !important'a başvurmadan yenebiliyor.

   Parçalar 16 KB'ın ALTINDA tutuluyor; gerekçesi 01-base.css'te yazılı.

   NE YAPIYOR: uygulamayı telefonda "küçültülmüş bir web sitesi" olmaktan
   çıkarıp bir mesajlaşma uygulamasına benzetiyor. Üç şey:

     1. Gezinme yandan alta iniyor (.tabbar) — başparmağın olduğu yere.
     2. Gelen kutusu iki EKRAN oluyor: liste ve konuşma. İkisi aynı anda
        görünmüyor, geçiş geri düğmesiyle. (Izgara kuralı 06-screens.css'te;
        burada o ekranların kendi biçimi var.)
     3. Ekranın kenarları cihazın kendi kenarları: çentik, ana ekran çubuğu
        ve yazılım klavyesi hesaba katılıyor.
   ========================================================================== */

/* --- dokunmatik ------------------------------------------------------------
   Fare için yazılmış davranışların dokunmada karşılığı yok ve bazıları
   zarar veriyor: Android'de her dokunuşta beliren gri dikdörtgen, uygulamayı
   "tarayıcıda açılmış bir sayfa" gibi gösteren ilk ayrıntı. */
@media (pointer: coarse) {
  body {
    -webkit-tap-highlight-color: transparent;
    /* Çift dokunuşla yakınlaştırmayı kapatıyor — dolayısıyla tarayıcının
       "acaba çift dokunuş mu geliyor" diye beklettiği 300 ms de kalkıyor.
       Yakınlaştırmanın kendisi (iki parmakla) çalışmaya devam eder. */
    touch-action: manipulation;
  }

  /* Kaydırma bir panelde bitmeli, sayfaya devredilmemeli: mesaj akışının
     dibinde parmağı çekmeye devam etmek, altındaki ekranı da kaydırıyor ve
     Android'de sayfayı yenileyen "aşağı çek" hareketini tetikliyordu — yani
     sohbetin sonuna gelen kullanıcı, farkında olmadan sayfayı yeniliyordu. */
  .chat__messages,
  .thread-list__items,
  .chat-info__body,
  .content { overscroll-behavior: contain; }
}

/* --- alt gezinme şeridi ---------------------------------------------------
   Geniş ekranda hiç yok: orada kenar çubuğu duruyor ve iki gezinme birden
   çizmek, aynı bağlantıyı iki yerde göstermek olurdu. */
.tabbar { display: none; }

/* ==========================================================================
   TELEFON — 720px ve altı
   Eşik 06-screens.css'teki gelen kutusu eşiğiyle AYNI: orada liste ile
   konuşma tek sütuna iniyor, burada da kabuk telefona geçiyor. İki farklı
   sayı yazılsaydı, aradaki genişlikte yarı masaüstü yarı telefon bir ekran
   kalırdı.
   ========================================================================== */
@media (max-width: 720px) {

  :root {
    /* Başlık şeridi alçalıyor: telefonda dikey piksel en pahalı kaynak. */
    --header-h: 54px;
    /* Hesap menüsüne ayrılan yer yalnızca avatar kadar — adı ve kurumu
       yanında yazacak genişlik yok (aşağıda gizleniyor). Bu belirteç aynı
       zamanda başlık şeridinin sağ dolgusu, yani başlık da onunla daralıyor. */
    --header-account-w: 46px;
    --gutter: .75rem;
  }

  /* Kabuk: tek sütun, üstte ekran, altta gezinme.
     100dvh — 100vh DEĞİL. Mobil tarayıcılarda 100vh, adres çubuğu görünürken
     bile GİZLİYMİŞ gibi ölçülüyor: yazma alanı ekranın altından taşıyor ve
     mesaj yazmak için önce sayfayı kaydırmak gerekiyordu. dvh o çubuğun
     açılıp kapanmasını izliyor. Öncesindeki 100vh satırı, dvh bilmeyen eski
     tarayıcılar için yedek. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
  }

  /* Kenar çubuğu telefonda hiç çizilmiyor. Daraltılmış hâli de bir seçenekti;
     denendiğinde 58 piksellik dikey şerit zaten dar olan ekrandan bir sütun
     yiyor ve gezinmeyi başparmağın ulaşamadığı sol üst köşede bırakıyordu. */
  .sidebar { display: none; }

  /* Kenar çubuğu gidince ızgarada tek sütun kalıyor; .main'in "2. sütun"
     yazan sabiti onu var olmayan bir sütuna gönderirdi. */
  .main { grid-column: 1; }

  .tabbar {
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Ana ekran çubuğunun (iPhone) ve Android'in gezinme çubuğunun altında
       kalmamak için. Cihazda böyle bir çubuk yoksa değer sıfırdır. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    flex-shrink: 0;
  }

  .tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .4375rem .125rem .375rem;
    color: var(--text-muted);
    font-size: .625rem;
    font-weight: 600;
    text-decoration: none;
  }
  .tabbar__item:hover { text-decoration: none; }
  .tabbar__item--active { color: var(--brand); }

  .tabbar__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 26px;
  }
  .tabbar__icon svg { width: 22px; height: 22px; position: relative; }

  /* Açık sekmenin simgesinin arkasındaki hap. Renk tek başına da yeterdi ama
     dar bir şeritte beş simge yan yanayken hangisinin açık olduğu, yalnızca
     ton farkıyla bir bakışta okunmuyordu. */
  .tabbar__item--active .tabbar__icon::before {
    content: "";
    position: absolute;
    width: 56px;
    max-width: 100%;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
  }

  .tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar__badge {
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #04231a;
    font-size: .625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* Konuşma ya da lead künyesi açıkken şerit kalkıyor: o iki ekran telefonda
     TAM EKRAN ve altlarında duran bir gezinme şeridi, "buradan çıkış geri
     düğmesiyle" diyen tasarımla çelişirdi. WhatsApp da sohbeti açtığında
     sekmelerini kaldırıyor. Çıkış yolu başlıktaki geri oku. */
  .app:has(.inbox--thread-open) .tabbar,
  .app:has(.inbox--info-open) .tabbar { display: none; }

  /* --- başlık şeridi ------------------------------------------------------ */
  .topbar { gap: .5rem; }
  .topbar h1 { font-size: 1.0625rem; font-weight: 700; }

  /* Hesapta yalnızca avatar kalıyor: ad ve kurum, başlığın kendi yazısıyla
     yer için yarışıyor ve telefonda o yarışı başlık kazanmalı. Kimliğin
     tamamı menü açıldığında zaten yazıyor (.account__head). */
  .account { padding: 0 .5rem 0 0; }
  .account__button { padding: .25rem; }
  .account__meta,
  .account__caret { display: none; }
  .account__menu { right: .5rem; left: .5rem; min-width: 0; }

  /* Gelen kutusunun başlığındaki "Varsayılan hat: … · Bağlı" rozeti
     telefonda çizilmiyor. Şeride sığmıyor ve söylediği şey konuşmanın
     içinde zaten, üstelik daha doğrusu duruyor: cevabın gideceği hat
     künyede yazılı (#info-line) ve konuşmanın KENDİ hattı — kurumun
     varsayılanı değil. */
  .main:has(.inbox) .topbar .badge { display: none; }

  /* --- konuşma listesi ---------------------------------------------------- */
  /* Satırlar büyüyor: 44 piksel dokunma hedefinin altındaki bir satır,
     parmakla açılmaya çalışıldığında komşusunu açıyor. */
  .thread {
    padding: .625rem .75rem;
    gap: .75rem;
    /* Ayıraç satırın tamamı boyunca değil, avatarın bittiği yerden
       başlıyor (aşağıdaki ::after). Kenardan kenara çizgi, listeyi bir
       tabloya benzetiyordu. */
    border-bottom: 0;
    position: relative;
  }
  .thread::after {
    content: "";
    position: absolute;
    left: 4rem;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
  }
  .thread:last-child::after { display: none; }
  .thread .avatar { width: 50px; height: 50px; font-size: 1rem; }
  .thread__name { font-size: .9375rem; }
  .thread__preview { font-size: .8125rem; }

  /* Dokunmada :hover yoktur; parmağını kaldırdıktan sonra da "seçili" kalan
     bir satır, açılmamış bir konuşmayı açılmış gibi gösteriyordu. */
  .thread:hover { background: transparent; }
  .thread:active { background: var(--surface-2); }

  /* --- konuşma ------------------------------------------------------------ */
  .chat__head { padding: 0 .5rem 0 .25rem; gap: .5rem; }
  .chat__title { font-size: 1rem; }

  /* Sağdaki 2.75rem'lik pay, giden balonların yanına asılan hat avatarı
     içindi; telefonda o avatar çizilmiyor (aşağıda) ve pay, akıştan boşuna
     bir parmak genişliği çalıyordu. */
  .chat__messages { padding: .75rem .625rem .5rem; }
  .bubble__avatar { display: none; }

  .bubble {
    max-width: 85%;
    /* WhatsApp balonu: karşıdan gelen sol üstünden, giden sağ üstünden
       "kesik". Kuyruk çizilmiyor — üçgeni ayrıca konumlandırmak, medya ve
       hata durumlarında balonun her varyantında ayrı ayrı ayarlanacak bir
       ayrıntı olurdu; köşe farkı yönü tek başına söylüyor. */
    border-radius: 12px;
  }
  .bubble:not(.bubble--out) { border-top-left-radius: 4px; }
  .bubble--out { border-top-right-radius: 4px; }

  /* --- yazma alanı -------------------------------------------------------- */
  .chat__composer {
    padding: .5rem .625rem;
    /* Klavye kapalıyken ana ekran çubuğunun üstünde durur; klavye açıkken
       inset zaten sıfırlanır ve alan klavyeye yapışır. */
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  }
  .composer-row { gap: .5rem; }
  .composer-row .textarea { min-height: 44px; border-radius: 22px; }

  /* Gönder düğmesi WhatsApp'taki gibi yuvarlak ve yalnızca simge. Yazı
     kaldırılmıyor, GİZLENİYOR (.btn__label): düğmenin adı ekran okuyucuda
     kalsın diye ayrıca aria-label yazmak yerine, var olan yazı yerinde
     duruyor ve yalnızca görünmüyor. */
  #composer-send {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  #composer-send svg { width: 20px; height: 20px; }

  /* --- dokunulabilir denetimler ------------------------------------------- */
  /* 16 PİKSEL BİR TASARIM TERCİHİ DEĞİL, iOS KURALI: Safari, yazı tipi
     16px'ten küçük bir alana dokunulduğunda sayfayı kendiliğinden
     yakınlaştırıyor ve geri uzaklaştırmıyor — kullanıcı, tek bir aramadan
     sonra kaymış bir arayüzle baş başa kalıyor. rem DEĞİL px: kullanıcı kök
     yazı boyunu küçültmüşse rem de küçülür ve kural sessizce çalışmaz. */
  .input,
  .select,
  .textarea,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"] { font-size: 16px; }

  /* Onay kutusu ve radyo düğmesi süzgeç kutusunda yan yana duruyor;
     varsayılan 13 piksellik kutu parmakla ıskalanıyordu. */
  .thread-filter__opt input { width: 18px; height: 18px; }
  .thread-filter__opt { padding: .4375rem .25rem; }

  /* --- ekranlar ----------------------------------------------------------- */
  /* Kartın kenarlığı ekranın kenarına yapıştığında bir çerçeve değil, ince
     bir çizgi gibi okunuyor; telefonda kart kenardan kenara.

     YALNIZCA DOĞRUDAN ÇOCUK: kural bütün kartlara yazıldığında ızgaranın
     içindeki sayı kutuları da köşelerini kaybediyor ve dört ayrı kutu tek
     bir gri bloğa dönüşüyordu. Kenardan kenara olan, ekranın kendi
     bölümleridir; bir ızgaranın içindeki kutu değil. */
  .content { padding: 0; }
  .content > .card { border-radius: 0; border-left: 0; border-right: 0; }
  .card__body { padding: 1rem .875rem; }
  .card__header, .card__footer { padding-left: .875rem; padding-right: .875rem; }

  /* Izgaralar kendi boşluklarını kendileri açıyor: .content'in dolgusu
     kalktı ve onlar kenardan kenara olmamalı. */
  .content > .grid { padding: 0 .75rem; }

  /* Sayı kutuları İKİ SÜTUN. Tek sütuna inince dört sayı dört ekran
     yüksekliği kaplıyordu: "genel bakış" adındaki ekranda hiçbir şeyin
     genel bakışı görünmüyordu. İkişerli dizilince dördü birden ilk
     ekranda. */
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .stat { padding: .75rem .875rem; }
  .stat__value { font-size: 1.5rem; }

  /* Bildirimler alttan: üstte başlık şeridini örtüyorlardı ve telefonda o
     şerit ekrandaki tek yön göstergesi. Gezinme şeridinin üstünde duruyor. */
  .toasts {
    top: auto;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    left: .75rem;
    right: .75rem;
    max-width: none;
  }

  /* Kip penceresi ekranın altına oturuyor (alt sayfa): telefonda ortada
     yüzen bir kutu, klavye açıldığında yarısı kesilerek kalıyordu. */
  .modal__dialog {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .modal { align-items: flex-end; padding: 0; }
}

/* --- ana ekrandan açıldığında ---------------------------------------------
   Tarayıcıda değil, kendi penceresinde çalışıyor: geri düğmesi yok, adres
   çubuğu yok. Yenileme hareketi de yok, dolayısıyla kaydırmanın sayfaya
   devredilmesi burada büsbütün anlamsız. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }

  /* Metin seçimi uzun basmayla açılan bir menü getiriyor ve uygulamanın
     kendi kabuğunda (gezinme, başlık) seçilecek bir şey yok. Mesajlar,
     numaralar ve künye alanları bunun DIŞINDA: kopyalanabilmeleri gerekiyor
     ve aşağıdaki satır onları geri açıyor. */
  .tabbar, .sidebar, .topbar, .chat__head, .thread-tabs {
    -webkit-user-select: none;
    user-select: none;
  }
  .chat__messages, .chat-info__body, .thread__preview, .content {
    -webkit-user-select: text;
    user-select: text;
  }
}