/*
 * Studio isolated demo — responsive compatibility layer.
 *
 * The demo intentionally keeps the production console markup.  This final,
 * demo-only stylesheet resolves legacy cascade conflicts without changing the
 * real platform source or its application logic.
 */

/* Keep the floating header on one row at every desktop/tablet width. */
.hdr {
  flex-wrap: nowrap !important;
  min-width: 0;
  /* Dropdowns and popovers are children of the header. Clipping the whole
     row made those controls look broken even though their handlers ran. */
  overflow: visible !important;
}

.hdr > h1,
.hdr .status {
  flex: 0 0 auto;
}

.hdr .tabs {
  flex: 1 1 auto !important;
  min-width: 0;
  margin-left: 0 !important;
  overflow: visible !important;
  scrollbar-width: none;
}

.hdr .tabs::-webkit-scrollbar,
.top-robot-list::-webkit-scrollbar {
  display: none;
}

.top-robot-list {
  flex: 0 1 28%;
  min-width: 120px;
  max-width: 28%;
  margin-left: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.hdr .status {
  min-width: 0;
}

.studio-home-link {
  display: inline-grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  color: var(--text-muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.studio-home-link:hover {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* At common 1280px laptop widths the flex container used to shrink below
 * the natural width of its navigation children while leaving overflow
 * visible, so “数据管理” and the first robot chip occupied the same pixels.
 * Preserve the navigation width and let the horizontally-scrollable robot
 * strip absorb the remaining space. */
@media (min-width: 1181px) and (max-width: 1350px) {
  .hdr .tabs {
    flex: 0 0 auto !important;
  }

  .top-robot-list {
    flex: 1 1 120px;
    min-width: 0;
    max-width: none;
  }
}

/*
 * These panels already use top/right/bottom/left.  Reset the legacy 100%
 * width and viewport-height declarations so the containing block is not
 * counted twice (the source of the right/bottom overflow).
 */
.role-workspace,
#panelRobotMgr,
#panelData {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

#robotGridContainer {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
}

.studio-demo-drawer-close {
  display: none;
}

/* Make modal content reachable on short laptop windows and landscape phones. */
.modal-overlay {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-overlay > .modal,
.modal-overlay > .modal-content,
.modal-overlay > .modal-box {
  box-sizing: border-box;
  max-height: calc(100dvh - 24px) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/*
 * The source UI's <=1023px rule gives every direct modal DIV a viewport-wide
 * width. Inside a padded modal that turns a 310px content box into a 366px
 * child at 390px, so the port fields, scan row and action buttons are cut off.
 * Keep the modal itself viewport-bound and let its children size to its actual
 * content box instead.
 */
.modal-overlay > .modal > *,
.modal-overlay > .modal-content > *,
.modal-overlay > .modal-box > * {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100% !important;
}

.modal-overlay > .modal > div:not([class*="overlay"]),
.modal-overlay > .modal-content > div:not([class*="overlay"]),
.modal-overlay > .modal-box > div:not([class*="overlay"]) {
  width: auto !important;
}

.modal-overlay .modal input,
.modal-overlay .modal select,
.modal-overlay .modal textarea,
.modal-overlay .modal-content input,
.modal-overlay .modal-content select,
.modal-overlay .modal-content textarea,
.modal-overlay .modal-box input,
.modal-overlay .modal-box select,
.modal-overlay .modal-box textarea {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Some source handlers replace a title and leave its close button empty. */
.modal-close:empty::before {
  content: "\00d7";
  display: block;
  font: 24px/1 system-ui, sans-serif;
}

/* The safety badge must never sit above modal controls. */
body:has(.modal-overlay.show) #studioDemoBadge,
body:has(.modal-overlay[style*="display: flex"]) #studioDemoBadge,
body:has(.modal-overlay[style*="display:flex"]) #studioDemoBadge {
  display: none !important;
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .top-robot-list {
    display: none !important;
  }

  .hdr .tabs button,
  .hdr .tabs .map-tab-btn {
    padding-inline: 12px !important;
  }
}

/* Tablet and phone: navigation moves to the fixed bottom bar. */
@media (max-width: 1023px) {
  /*
   * z-index:1 on .main created a stacking context below the root-level scrim.
   * Removing it lets the z46 drawers sit above the z45 scrim and receive taps.
   */
  .main {
    z-index: auto !important;
  }

  .hdr {
    height: 56px !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .studio-demo-drawer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 120;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(12, 16, 29, .88);
    color: #fff;
    font: 24px/1 system-ui, sans-serif;
    cursor: pointer;
  }

  .hdr .tabs {
    display: none !important;
  }

  .bottom-tabs {
    display: flex !important;
    /* Keep primary navigation operable while a map-side drawer is open. */
    z-index: 60 !important;
  }

  .top-robot-list {
    flex: 0 1 32%;
    max-width: 32%;
  }

  .role-workspace {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  #panelRole {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #panelRole > .role-column:not(.right-chat) {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #panelRobotMgr,
  #panelData {
    padding: 14px !important;
  }

  .modal-overlay > .modal,
  .modal-overlay > .modal-content,
  .modal-overlay > .modal-box {
    width: min(480px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  .modal-overlay .modal [style*="display:flex"],
  .modal-overlay .modal-content [style*="display:flex"],
  .modal-overlay .modal-box [style*="display:flex"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #rightDebuggerDrawer {
    position: fixed !important;
    top: 82px !important;
    right: 14px !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    z-index: 1200 !important;
  }

  #panelRole .debugger-toggle-btn {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    z-index: 1100 !important;
  }

  #studioDemoBadge {
    right: 8px !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }

  /* Keep the safety label from covering controls inside an open drawer. */
  body.demo-drawer-open #studioDemoBadge {
    display: none !important;
  }
}

@media (max-width: 639px) {
  /* Leave the fixed bottom navigation outside the sheet instead of covering
   * it with the legacy z46 drawer. Users can always switch sections or close
   * the current map panel from that persistent navigation surface. */
  .side-left,
  .side {
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    max-height: calc(82dvh - 54px) !important;
  }

  /* The full safety pill obscures role/data controls when it sits above the
   * bottom navigation. Keep a compact, visible demo marker below the header. */
  #studioDemoBadge {
    top: 76px !important;
    right: 8px !important;
    bottom: auto !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  #studioDemoBadge > span {
    display: none !important;
  }

  #studioDemoBadge > button {
    min-height: 0 !important;
    padding: 0 2px !important;
  }

  .hdr > h1 {
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .studio-home-link {
    width: 30px;
    height: 30px;
  }

  .top-robot-list {
    min-width: 96px;
    max-width: 30%;
  }

  .robot-mgr-actions {
    width: 100%;
  }

  #robotSearchInput {
    width: 100% !important;
  }

  #robotGridContainer {
    grid-template-columns: 1fr !important;
  }

  #robotMgrModal .modal > div[style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  #robotMgrModal .modal > div[style*="display:flex"] > div {
    flex: 1 1 132px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #robotMgrModal .form-label[style*="display:flex"] {
    gap: 8px;
    flex-wrap: wrap !important;
  }

  #robotMgrModal .form-label > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #robotMgrModal .form-label > .btn {
    flex: 0 0 auto;
    margin-left: auto;
  }

  #robotMgrModal #scanRobotsList {
    overflow-wrap: anywhere;
  }

  #robotMgrModal #scanRobotsList > div {
    gap: 6px;
    flex-wrap: wrap !important;
  }

  #robotMgrModal #scanRobotsList > div > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  #robotMgrModal #scanRobotsList > div > .btn {
    flex: 0 0 auto !important;
  }

  .modal-overlay .modal-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .modal-overlay .modal-actions > .btn {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  .top-robot-list {
    display: none !important;
  }
}

@media (max-height: 700px) {
  .modal-overlay {
    align-items: flex-start !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .modal-overlay > .modal,
  .modal-overlay > .modal-content,
  .modal-overlay > .modal-box {
    margin-block: auto;
    max-height: calc(100dvh - 24px) !important;
  }
}