/* Konsol menempel di bawah tetapi berhenti di tepi kiri panel perangkat,
   sehingga tampilan HP di kanan tidak ikut tertutup. Panel perangkat memakai
   lebar 420px dan menjadi layar penuh pada mode mobile, jadi konsol melebar
   penuh hanya ketika panel itu tidak terbuka. Tinggi tetap dibiarkan diatur
   panel (resizer), hanya dibatasi agar tidak melebihi layar. */

.app-container {
  --cp-width: 420px;
}

.global-console-container,
.global-console-container.is-top-layer {
  left: var(--nav-width, 64px) !important;
  right: var(--cp-width) !important;
  bottom: 0 !important;
  max-height: 62vh !important;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: none;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.72) !important;
  background: #0a0e17 !important;
  overflow: hidden;
  transition: left 0.22s ease, right 0.22s ease;
}

.global-console-container.nav-expanded {
  left: 180px !important;
}

.app-container:not(:has(.control-panel-wrapper.is-open)) .global-console-container {
  right: 0 !important;
}

.app-container:has(.control-panel-wrapper.is-mobile.is-open) .global-console-container {
  left: 0 !important;
  right: 0 !important;
}

.device-console {
  border-radius: 14px 14px 0 0;
}

.device-console.is-maximized {
  border-radius: 0;
}

@media (max-width: 1100px) {
  .global-console-container,
  .global-console-container.is-top-layer {
    left: var(--nav-width, 64px) !important;
    right: 0 !important;
  }
}

/* Di layar kecil panel perangkat memakai seluruh layar, jadi konsol muncul
   sebagai sheet bawah yang lebih pendek agar HP tetap terlihat di atasnya. */
@media (max-width: 1024px) {
  .app-container .global-console-container,
  .app-container .global-console-container.is-top-layer,
  .app-container .global-console-container.is-mobile-sheet {
    left: 0 !important;
    right: 0 !important;
    height: var(--console-mobile-h, 46vh) !important;
    max-height: 82vh !important;
  }

  .device-console {
    height: 100% !important;
  }

  .mobile-sheet-handle-bar {
    height: 26px !important;
    padding-top: 8px !important;
    background: #0f1522 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    touch-action: none;
  }

  .mobile-sheet-handle-bar .sheet-handle-pill {
    width: 46px !important;
    height: 5px !important;
    background: #6b7280 !important;
  }

  .mobile-console-backdrop {
    background: rgba(0, 0, 0, 0.18) !important;
  }

  .console-tabs-bar {
    min-height: 40px !important;
  }

  .console-shortcuts {
    padding: 4px 6px !important;
  }

  .console-history {
    font-size: 11px !important;
  }
  /* Backdrop bawaan menutupi handle sehingga gestur geser tidak pernah mulai.
     Handle dinaikkan di atasnya agar bisa menangkap pointer. */
  .global-console-container,
  .global-console-container.is-top-layer {
    z-index: 1500 !important;
  }

  .mobile-console-backdrop {
    z-index: 1400 !important;
  }
}

/* Label model perangkat di tengah-atas area pratinjau tiap kartu (halaman
   depan). Muncul hanya bila registry mengirim info.model; elemen kosong
   disembunyikan sehingga kartu tanpa model tetap bersih. */
.device-model-overlay {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  max-width: 78%;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.62);
  color: #e6edf6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.device-model-overlay:empty {
  display: none;
}
}