/* Web telefonu paneli taşınır / küçülür (21 Eki 2026) · `telefon-paneli.js`.
   Renkler stil.css'in GTR değişkenleri. Yalnız 700 px ve üstü: daha darda
   şerit gizli, sütun bugünkü gibi listenin altında. Panel ayrıyken kap
   (`.arm-alt`) `telefonsuz` olur: sütunsuz düzenler stil.css'ten gelir.
   Katman 19: kişi kartı çekmecesinin (17-18) üstünde; yaprak (20), Asistan
   paneli (22), ortak arama şeridi (25), bilgi şeridi (30), gelen arama
   penceresi (35) ve Kişi bul (40) onun üstünde kalır (denetim B7). */

.tp-bas, .tp-boyut { display: none; }

@media (min-width: 700px) {
  .tp-bas {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 2px 0 10px;
    border-radius: 10px;
    background: var(--gtr-surface);
    user-select: none;
    -webkit-user-select: none;
  }
  .tp-nokta { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gtr-ink-soft); }
  .arm-telefon:has(.arm-telefon-durum.bagli) .tp-nokta { background: var(--gtr-primary); }
  .arm-telefon:has(.arm-telefon-durum.kopuk) .tp-nokta { background: var(--gtr-uyari-ink); }
  .tp-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--gtr-ink); }
  .tp-dugme {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gtr-primary-dark);
  }
  .tp-dugme:hover { background: var(--gtr-primary-faint); }
  .tp-dugme[hidden] { display: none; }

  /* ---- ayrı pencere ---- */
  html body .arm-telefon.tp-ayri:not([hidden]) {
    position: fixed;
    z-index: 19;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 14px;
    background: var(--gtr-bg);
    border: 1px solid var(--gtr-line);
    box-shadow: 0 14px 36px rgba(20, 35, 40, 0.24);
    overflow: hidden;
  }
  .arm-telefon.tp-ayri .arm-telefon-kutu { flex: 1 1 auto; min-height: 0; }
  html body .arm-telefon.tp-ayri .arm-telefon-cerceve { width: 100%; max-width: none; height: 100%; max-height: none; }
  .arm-telefon.tp-ayri:not(.tp-kucuk) .tp-boyut {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    touch-action: none;
    /* Köşede üç çapraz çizgi: "buradan çekilir". */
    background: linear-gradient(135deg, transparent 0 55%, var(--gtr-ink-soft) 55% 60%, transparent 60% 70%, var(--gtr-ink-soft) 70% 75%, transparent 75% 85%, var(--gtr-ink-soft) 85% 90%, transparent 90%);
    opacity: 0.55;
  }
  .arm-telefon.tp-ayri:not(.tp-kucuk) .tp-boyut:hover { opacity: 1; }

  /* ---- küçük şerit: yalnız başlık ---- */
  html body .arm-telefon.tp-kucuk:not([hidden]) { width: auto; min-width: 260px; height: auto; padding: 4px; gap: 0; }
  /* "Telefon bağlanamadı" küçükken de görünür kalır (denetim B6); "başka sekmede açık" da (Y6). */
  .arm-telefon.tp-kucuk > :not(.tp-bas):not(.arm-telefon-durum.kopuk):not(.arm-telefon-durum.bilgi) { display: none !important; }
  .arm-telefon.tp-kucuk > .arm-telefon-durum:is(.kopuk, .bilgi) { margin: 0 4px 4px; }
  /* Ayrı pencere sağ yarıdaysa kişi kartı onun altına girmez (2. denetim Y1). */
  .arm-alt.telefon-ayri { padding-right: var(--tp-sag-pay, 0px); }
  /* Asistan açıkken sahne zaten 400 px dar: pay pencereye göre, sahneye çevrilir. */
  body.ast-acik .arm-alt.telefon-ayri { padding-right: max(0px, calc(var(--tp-sag-pay, 0px) - 400px)); }

  .arm-telefon.tp-kucuk .tp-bas { min-height: 40px; background: transparent; }

  /* Sürerken çerçeve fare olayı almaz (yoksa çekiş çerçeveye girince kopar). */
  body.tp-suruklen { user-select: none; -webkit-user-select: none; }
  body.tp-suruklen .arm-telefon-cerceve { pointer-events: none; }
}

/* 700-1023: açık kart tam ekran katman; o da pencerenin solunda biter. */
@media (min-width: 700px) and (max-width: 1023px) {
  body.arama-cihazi:not(.ast-acik) .arm-alt.telefon-ayri { padding-right: 0; }
  body.arama-cihazi:not(.ast-acik) .arm-alt.telefon-ayri .arm-orta.acik { right: var(--tp-sag-pay, 0px); }
}

/* Gelen arama kartı Aranacaklar'da sağ altta: panel ayrıyken onu örtmesin
   (denetim B3). Ayrı pencere sağ yarıdaysa kart onun soluna
   (`--tp-gp-sag`, telefon-paneli.js); küçük şerit varsa kart onun üstüne. */
@media (min-width: 900px) {
  body:has(#ekranAranacaklar:not([hidden]) .arm-telefon.tp-ayri:not(.tp-kucuk):not([hidden])) .gp-kok {
    right: var(--tp-gp-sag, 16px);
    width: min(340px, calc(100vw - var(--tp-gp-sag, 16px) - 16px));
  }
  body:has(#ekranAranacaklar:not([hidden]) .arm-telefon.tp-kucuk:not([hidden])) .gp-kok { bottom: var(--tp-gp-alt, 16px); }
}

@media (min-width: 700px) and (pointer: fine) {
  .tp-bas { cursor: grab; }
  .tp-bas .tp-dugme { cursor: pointer; }
  body.tp-suruklen, body.tp-suruklen .tp-bas { cursor: grabbing; }
  body.tp-boyutlan, body.tp-boyutlan .tp-bas { cursor: nwse-resize; }
}