/* Map controls belong to the workspace, independently of navigation state. */
@media (min-width: 641px) {
  #private-screen.private-maps-active .private-maps-section {
    grid-template-rows: auto minmax(0, 1fr);
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot {
    position: relative;
    z-index: 12;
    display: block;
    min-width: 0;
    container: map-context / inline-size;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
  }
  #private-screen.private-maps-active .private-map-context:not(.is-hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot:has(.private-map-context.is-hidden) {
    display: none;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot :is(.private-map-active-card,.private-map-control-card,.private-map-actions) {
    align-self: start;
    height: auto;
    min-height: 0;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot :is(.private-map-active-card,.private-map-controls) {
    padding: 8px 10px;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot .private-map-active-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    font-size: 11px;
    line-height: 1.45;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot .private-map-active-meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot #private-map-prompt {
    align-self: start;
    min-height: 44px;
    height: auto;
    min-width: 0;
    margin-top: 17px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  #private-screen.private-maps-active :is(.private-maps-stage,.private-maps-chat) {
    height: 100%;
    min-height: 0;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot:has(
    #chart-solar-return-country-search[aria-expanded="true"],
    #chart-solar-return-city-results > .city-suggestion
  ) { z-index: 45; }
}

/* Use available workspace width, including when the desktop menu is pinned. */
@container map-context (max-width: 800px) {
  #private-screen.private-maps-active .private-map-context:not(.is-hidden) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 44px;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot #private-map-prompt {
    padding: 10px;
  }
  #private-screen.private-maps-active .private-map-collapsed-context-slot #private-map-prompt > span { display: none; }
}
@container map-context (max-width: 480px) {
  #private-screen.private-maps-active .private-map-context:not(.is-hidden) {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
  #private-screen.private-maps-active .private-map-active-card { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* Reserve the button's space only beside the view selector. Extra fields
     can use the entire card instead of being squeezed into that column. */
  #private-screen.private-maps-active .private-map-mobile-context-slot .private-map-control-card {
    grid-area: 2 / 1 / 3 / -1;
  }
  #private-screen.private-maps-active .private-map-mobile-context-slot .chart-wheel-controls {
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 10px;
  }
  #private-screen.private-maps-active .private-map-mobile-context-slot .private-map-actions {
    grid-area: 2 / 2 / 3 / 3;
    z-index: 1;
  }
}