/* Mobil oynanış (sheet): style.css'ten sonra yüklenir.
   Alt panel (#panel) ve sıralama (#ranking-panel) iki yükseklik alır: data-sheet="half" | "full"
   (public/mobile-ui.js createSheet). "full" mevcut azami yüksekliktir (style.css'e dokunulmaz);
   buradaki kurallar yalnız "half"u ve tutma çubuğunu ekler. Klavye açıkken sheet zaten tam boydur. */

.sheet-grabber { display: none; }

/* Aynı koşul mobile-ui.js SHEET_DRAG_QUERY: dikey telefon/tablet sheet'i. Yatay telefon düzeni değişmez. */
@media (min-height: 501px) and (max-width: 760px), (min-height: 501px) and (pointer: coarse) and (max-width: 1100px) {
  /* Dokunma alanı 44x44 (96 genişlik başlıktaki ? / sohbet düğmelerinin soluna 15 px biniyordu, denetim 2026-11-02); görünen çubuk 36x4. Düğme #panel şablonunda (render-panel.js) ve #ranking-panel işaretlemesinde (index.html) ilk çocuktur; mutlak konumlu olduğu için yer kaplamaz. */
  #panel > .sheet-grabber, #ranking-panel > .sheet-grabber {
    display: block; position: absolute; top: 0; left: calc(50% - 22px); z-index: 3; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    margin: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: transparent; box-shadow: none;
    touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  }
  /* the 44px grabber sits in the middle of the header: on a 360 px phone the ? key began 3 px under it, so the header keys pull together by 4 px each gap */
  body #panel .win-head { gap: 4px; }
  body #panel .win-head :is(.win-help, .win-chat) { position: relative; z-index: 4; } /* on a 320 px phone the header keys still reach under the grabber: they win the overlap */
  .sheet-grabber::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
    background: var(--muted); opacity: .55;
  }
  .sheet-grabber:focus-visible { outline: 3px solid var(--even); outline-offset: -6px; }
  .sheet-grabber:focus-visible::before, .sheet-grabber:active::before { opacity: 1; }
  /* Başlık da sürükleme tutamağıdır (içerik alanı değil); düğmeleri kendi işini yapar. Sohbetin kendi tutamağı chat-ui.js / community.css'te. */
  #panel .win-head, #ranking-panel > header { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }

  #panel, #ranking-panel { transition: max-height 200ms ease-out, height 200ms ease-out, transform 200ms ease-out, opacity 200ms ease-out; }

  /* half: haritanın üst yarısı görünür. İçerik kısaysa panel doğal yüksekliğinde kalır (max-height). */
  html:not(.keyboard-open) #panel[data-sheet="half"] {
    max-height: min(48dvh, calc(var(--visible-h, 100dvh) - var(--top-h, 0px) - var(--bar-h) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  /* Sıralama paneli: küçük telefonda listeye yer kalsın diye 360px alt sınır. */
  html:not(.keyboard-open) #ranking-panel[data-sheet="half"] {
    height: min(max(48dvh, 360px), calc(var(--visible-h, 100dvh) - var(--top-h, 0px) - var(--bar-h) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  html:not(.keyboard-open) #ranking-panel[data-sheet="full"] {
    height: min(72dvh, 660px, calc(var(--visible-h, 100dvh) - var(--top-h, 0px) - var(--bar-h) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  #panel, #ranking-panel { transition: none; }
}

/* Sohbet kutusu (kompakt ya da açık) altta durur: toast'lar #panel'deki gibi HUD'un altına çıkar, yazma kutusunu örtmez. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  body:has(:is(#chat:is(:not([hidden]), [data-chat-mode="compact"]), #ranking-panel:not([hidden]))) #toasts#toasts { /* doubled id: ties with style.css `body:has(#layers-btn…) #toasts` otherwise (2026-11-03: the toast sat on the input row) */ top: calc(max(6px, env(safe-area-inset-top)) + var(--top-h) + var(--announce-h, 0px) + 8px); bottom: auto; }
}

/* Telefon (<=480px): pencere gövdesi ekranın ~%45'i olsun. Yarım sheet 48 -> 58dvh, başlık 56 -> 44px. */
@media (max-width: 480px) and (min-height: 501px) {
  html:not(.keyboard-open) #panel[data-sheet="half"] {
    max-height: min(58dvh, calc(var(--visible-h, 100dvh) - var(--top-h, 0px) - var(--bar-h) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
  #panel .win-head { min-height: 44px; padding-block: var(--space-1); }
  #panel .body > .ui-tabs { margin-bottom: var(--space-2); }
}