/* The native plaza renders an illustrative “参考目录” after configured
 * models.  It is presentation-only.  Hide it with CSS rather than removing
 * React-owned nodes, so React can safely re-render the actual card list. */
.mt-3.space-y-3 > div.border-dashed,
.mt-3.space-y-3 > button.border-dashed {
  display: none !important;
}

.mt-3.space-y-3 > div[class*="uppercase"][class*="tracking-wider"] {
  display: none !important;
}

/* Do not hide a native <section> by looking for the add-model input.  In the
 * production bundle that input and the enabled-card list can share the same
 * section, especially on iOS; hiding the section also hid every user card.
 * Administrator controls are gated individually by steady-ui-v61 instead. */

/* The native bundle contains a fixed "周末愉快" empty-state.  The display
 * overlay supplies the current-day greeting without replacing React-owned
 * text nodes. */
.steady-welcome-title {
  color: transparent !important;
  position: relative;
}

.steady-welcome-title::after {
  content: attr(data-steady-greeting);
  color: var(--steady-welcome-color, #111827);
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

/* Desktop already has a persistent sidebar control at far left, making the
 * bordered header copy redundant.  On a phone that header copy is the only
 * way to reopen a closed drawer, so it must remain visible there. */
@media (min-width: 768px) {
  button[data-testid="open-sidebar-button"].border {
    display: none !important;
  }
}

.steady-welcome-subtitle {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* The header picker is centered under its trigger.  When the trigger sits at
 * the left edge of the chat pane, half of the popup falls into the sidebar and
 * is clipped by the chat container.  Anchor it to the trigger's left edge. */
div.absolute.left-1\/2.top-full.z-30.mt-2.w-max.min-w-\[280px\] {
  left: 0 !important;
  transform: none !important;
  max-height: min(70dvh, 560px);
  overflow-y: auto;
}

/* Phone: the plaza is a drawer on top of the conversation.  Use the entire
 * viewport for it instead of leaving a narrow, dimmed sliver of the chat on
 * the right, and keep the three filter rows comfortably tappable. */
@media (max-width: 767px) {
  aside[aria-label="控制面板"] {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    z-index: 110 !important;
  }

  /* Native mobile close translates the whole aside by 100%, including the
   * permanent 60px icon rail.  Keep that rail on screen and slide only the
   * content drawer away, matching the desktop interaction. */
  aside[aria-label="控制面板"].-translate-x-full {
    /* The 60px rail is the first child of the aside, not its last 60px.
     * Translating the whole aside leaves the (empty) drawer edge visible.
     * Collapse the container itself instead: retain the rail at x=0 and
     * remove the drawer from layout until React opens it again. */
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    transform: none !important;
  }

  aside[aria-label="控制面板"].-translate-x-full > nav,
  aside[aria-label="控制面板"].-translate-x-full > .absolute.right-0 {
    display: none !important;
  }

  aside[aria-label="控制面板"] [class*="overflow-y-auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* The plaza content is a native drawer.  Only widen its visible nav (the
   * inactive nav keeps the bundle's opacity-0 class), then let the card list
   * scroll inside the phone viewport instead of being clipped below it. */
  aside[aria-label="控制面板"] > nav:not(.opacity-0) {
    width: calc(100vw - 60px) !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* The scrollable list is one level inside the drawer.  The native nav has
   * overflow-hidden, so making only the nav scrollable leaves the cards
   * painted outside its scroll box on some mobile WebKit builds. */
  aside[aria-label="控制面板"] > nav:not(.opacity-0)
    > div > div.flex.h-full.min-h-0.flex-col.overflow-y-auto {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  aside[aria-label="控制面板"] > nav:not(.opacity-0)
    > div > div.flex.h-full.min-h-0.flex-col.overflow-y-auto > div.px-4.pb-5 {
    min-height: max-content !important;
  }

  /* iOS Safari does not consistently recalculate a nested 100dvh flex
   * scroller after the three filter rows are inserted.  The result is a blank
   * lower panel even though the cards exist.  Keep one scroll owner (the
   * visible drawer nav) and let its content grow naturally. */
  aside[aria-label="控制面板"] > nav:not(.opacity-0)
    > div > div.flex.h-full.min-h-0.flex-col.overflow-y-auto {
    height: auto !important;
    min-height: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .steady-model-filters {
    gap: 7px !important;
    margin: 9px 0 12px !important;
  }

  .steady-model-filter-group {
    width: max-content;
    max-width: 100%;
  }

  .steady-model-filter {
    min-height: 32px;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .steady-empty-welcome {
    min-height: calc(100dvh - 250px) !important;
    justify-content: flex-start !important;
    padding-top: 120px !important;
    padding-bottom: 32px !important;
  }

  .steady-welcome-title {
    max-width: 100%;
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: center;
  }
}