/* Mobile + Tablet Overlay (polished, less cluttered) */
:root {
  --app-top-offset: 122px;
  --device-safe-bottom: max(14px, env(safe-area-inset-bottom));
}

.mobile-sidebar-backdrop {
  position: fixed;
  inset: var(--app-top-offset) 0 0 0;
  background: rgba(15, 23, 42, 0.26);
  backdrop-filter: blur(6px);
  z-index: 34;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mobile-sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.device-overlay-controls {
  position: fixed;
  right: 14px;
  bottom: calc(var(--device-safe-bottom) + 4px);
  z-index: 46;
  display: none;
}

.overlay-control-btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
}

.overlay-control-btn .ico {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 14px;
}

@media (max-width: 1024px) {
  .mobile-sidebar-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.device-tablet .mobile-sidebar-backdrop {
    display: none;
  }

  .device-overlay-controls {
    display: block;
  }

  #toggleSidebar {
    display: none;
  }

  .topbar {
    height: auto;
    min-height: 56px;
    gap: 8px;
    padding: 10px 12px;
  }

  .topbar-right {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 7px;
    padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .topbar-right::-webkit-scrollbar {
    height: 4px;
  }

  .topbar-right .btn,
  .topbar-right .pill {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .sidebar {
    top: var(--app-top-offset);
    height: calc(100dvh - var(--app-top-offset));
    max-width: min(88vw, 360px);
    border: 0;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.28);
  }

  .panel {
    padding: 10px;
  }

  .panelSection {
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .main {
    padding-bottom: 82px;
  }

  .stage {
    border-radius: 16px;
    min-height: 58dvh;
  }

  .sm-legalFooter {
    position: static;
    margin: 10px auto 14px;
    width: fit-content;
    max-width: calc(100vw - 24px);
    box-shadow: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.86);
  }
}

@media (max-width: 740px) {
  .overlay-control-btn {
    padding: 12px;
    border-radius: 16px;
  }

  .overlay-control-btn .label {
    display: none;
  }

  .sidebar {
    max-width: 92vw;
  }

  .stage {
    min-height: 52dvh;
  }
}